Alert is not working second time when clicking on button

Question

I am using bootstrap version so I have created a slide down menu same like below example.

button not working second time

<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.

The problem is that when I click on close button in slide down the bar is closing up.

But when I again click on add wish list the slide down is not appearing again.

My problem is not only closing. It should close when i click on 'x' button if not it should close automatically after specific time.

Thanks.

Answer 1

Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.

$(document).ready(function() {
  $("#success-alert").hide();
  $("#btn2").click(function showAlert() {
    $("#success-alert").slideDown(300).delay(2000).slideUp(400);
  });
});

$('#success-alert .close').click(function() {
  $(this).parent().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
  <input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>