1

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.

2

3 Answers 3

3

Remove this from your close button 'data-dismiss="alert"' and add one more click function like below:

$(document).ready (function(){
    $("#success-alert").hide();
    $("#myWish").click(function showAlert() {
        $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
            $("#success-alert").slideUp(500);
        });   
    });

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

HTML will like:

<div class="product-options">
    <a  id="myWish" href="javascript:;"  class="btn btn-mini" >Add to Wishlist </a>
    <a  href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
    <button type="button" class="close">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>
0
1

This simple trick worked for me. Use this close.bs.alert bootsrap's event type to hide the element instead of removing it.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

or

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});
0

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>

1
  • I think you didn't see my code @SukumarGorai. There is a difference more-than ID . I didn't pasted your code. check the code of JavaScript. If my code is wrong then down vote, my code is correct. Commented May 21, 2018 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.