CODEWITHSUNDEEP
jquery
John Mark
John Mark

Reputation: 3

Jquery toggle doesn't work properly

I have this Jquery code:

 $('.item_bar_action_holder_drop a').click(function() {
            var item_bar = $('.item_bar_action_holder_actions');
            if(item_bar.is(':visible')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
            item_bar.slideToggle('fast', function() {
            });
        });

The problem here is when I click many times the button the "active" class will set to a closed panel and its wrong. I cant understand why it happend.

Upvotes: 0

Views: 307

Answers (2)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

Basic slideToggle() example.

I guess your active class's css is = display:block; and your item_bar's default css is display:none; if i am correct; you can use this way too:

$(document).ready(function() {
   $('.item_bar_action_holder_drop a').click(function() {
      var item_bar = $('.item_bar_action_holder_actions');

      item_bar.removeClass('active');//removes class from all
      $(this).addClass('active');//adds class clicked one

      if( item_bar.is(':visible')) {//edited here !
        item_bar.slideToggle('fast',function() {
           $(this).removeClass('active');//removes class when animate complete
        });
      }
  });
  //if you want to show first panel when your document is ready
  $('.item_bar_action_holder_actions:first').show().addClass('active');
});

Note: You didnt show your html, so i am trying to guess your html.

Upvotes: 0

Petah
Petah

Reputation: 46050

Check if the item_bar is being animated at the time, and don't queue anymore actions if it is:

$('.item_bar_action_holder_drop a').click(function() {
    var item_bar = $('.item_bar_action_holder_actions');
    if (item_bar.is(':animated')) {
        return;
    }
    ...
});

Upvotes: 1

Related Questions