Simplify my menu animation code

Posted by zaius on Stack Overflow See other posts from Stack Overflow or by zaius
Published on 2010-05-04T06:14:54Z Indexed on 2010/05/05 5:38 UTC
Read the original article Hit count: 208

Filed under:
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript