GoldenGonaz GoldenGonaz - 5 months ago 62
jQuery Question

jquery menu animation close/open

I am trying to achieve animation on open and close but no animation on switching between menus.

Switching between menus = no do not animate

Opening and closing menu = animate (slide up if opening / slide down if closing)

I have all the above - except animating on close. Does anyone have any suggestions that could get me out of this hole please!

(To close the menu click 2 times on the First or Second menu link, once to open and once to close)

Here is my DEMO

My jQuery

$('.pack__button--each').each(function() {
var $dropdown = $(this);

$(".pack__button", $dropdown).click(function(e) {
e.preventDefault();
if ($('.stickers__content').is(':visible')) {
var $div = $(".stickers__content", $dropdown);
$div.toggle();
$(".stickers__content").not($div).hide();
return false;
} else {
var $div = $(".stickers__content", $dropdown);
$div.animate({
height: "toggle",
opacity: "toggle"
}, "fast");
$(".stickers__content").not($div).hide();
return false;
}
});
});

Answer
var clicked;
$('.pack__button--each').each(function() {
  var $dropdown = $(this);
  $(".pack__button", $dropdown).click(function(e) {
    e.preventDefault();
    if ($('.stickers__content').is(':visible')) {
      var $div = $(".stickers__content", $dropdown);
      if(clicked != $('.pack__button').index(this)) {
        $div.toggle(); 
      } else {
        $div.slideToggle(); 
      }
      $(".stickers__content").not($div).hide();
      clicked = $('.pack__button').index(this);
      return false;
    } else {
      var $div = $(".stickers__content", $dropdown);
      $div.animate({
                height: "toggle",
                opacity: "toggle"
      }, "fast"); 
      $(".stickers__content").not($div).hide();
      clicked = $('.pack__button').index(this);
      return false;
    }    
  });
});

I am counting which menu item you have clicked and saving it as the clicked variable. When you click a menu item again it checks to see if was the last item clicked or not and runs either toggle or slideToggle.

Comments