Simplify my menu animation code

Question

I've got a bunch of 'project' divs that I want to expand when they're clicked on. If there's already a project open, I want to hide it before I slide out the new one. I also want to stop clicks on an already open project from closing and then opening it again.

Here's an example of what I mean (warning - wrote the code in the browser):

        $('.projects').click(function() {
          var clicked_project = $(this);

          if (clicked_project.is(':visible')) {
            clicked_project.height(10).slideUp();
            return;
          }

          var visible_projects = $('.projects:visible');
          if (visible_projects.size() > 0) {
            visible_projects.height(10).slideUp(function() {
              clicked_project.slideDown();
            });
          } else {
            clicked_project.slideDown();
          }
        });

Really, my big issue is with the second part - it sucks that I have to use that if/else - I should just be able to make the callback run instantly if there aren't any visible_projects.

I would think this would be a pretty common task, and I'm sure there's a simplification I'm missing. Any suggestions appreciated!

Answer 1

slideToggle?

$('.projects').click(function() {
  var siblings = $(this).siblings('.projects:visible');
  siblings.slideUp(400);
  $(this).delay(siblings.length ? 400 : 0).slideToggle();
});

Used a delay rather than a callback because the callback is called once per matched item. This would lead to multiple toggles if multiple items were visible.