Question

I have a portfolio itemlist. When I click on specific, its related div slidesDown and you can close (slideUp) by clicking on close link.
Works fine, but the events double fires when clicking on the the other items, so it slidesUp and Down twice, because of the classname relations?
I’m using index() to grap the elements and therefore giving the divs ID’s by 0,1,2,3,4,5,6….

Can someone explain a good workaround to this or a better solution?

HTML Markup example:

<div style="display:none;" id="0" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="1" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="2" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

JS:

(function(){

    $('.close').on('click', function(){
      $('.sliderwrapper').slideUp(800);
    });

    $('.singleitems ul li').on('click', function(){
      var index = $(this).index();
      $('.sliderwrapper').slideUp(800, function(){

          $('#' + index).slideDown(800);
      });

    });

})();

Answer 1

If you just change the slideDown from being a callback function, it will only be called once.

this code prevents the animations from overlapping:

$(document).ready(function() {
    var selected = false;
    $('.close').on('click', function() {
        $(this).parent('.sliderwrapper').slideUp(800);
        selected = false;
    });

    $('.singleitems ul li').live('click', function() {
        var index = $(this).index();

        if(!selected) {
            $("#" + index).slideDown(800);
            selected = true;
        } else {
            $(".sliderwrapper").filter(":visible").slideUp(800, function() {
                $("#" + index).filter(":hidden").slideDown(800);
            });
        }
    });
});​
​