Show/Hide div on click using jQuery

Question

I've got 4 divs and on click of the navigation I want to show one of them and hide the others. I have it working but I feel its not as smooth as I know it could be, its definitely my code that needs to be refactored! Heres what I have.

$('#details-speakers').click(function() {

    $('#home').slideUp('slow', function() {});
    $('#sessions-content').slideUp('slow', function() {});
    $('#cases-content').slideUp('slow', function() {});
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#speakers-content').slideDown('slow', function() {
        $('#details-speakers').addClass('selected');
        //Remove other classes
        $('#details-sessions').removeClass('selected');
        $('#details-cases').removeClass('selected');
        $('#details-workshops').removeClass('selected');
  });
});
$('#details-sessions').click(function() {

    $('#home').slideUp('slow', function() {});
    $('#speakers-content').slideUp('slow', function() {});
    $('#cases-content').slideUp('slow', function() {});
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#sessions-content').slideDown('slow', function() {
    $('#details-sessions').addClass('selected');
        //Remove other classes
        $('#details-speakers').removeClass('selected');
        $('#details-cases').removeClass('selected');
        $('#details-workshops').removeClass('selected');
  });
});
$('#details-cases').click(function() {

    $('#home').slideUp('slow', function() {});
    $('#speakers-content').slideUp('slow', function() {});
    $('#sessions-content').slideUp('slow', function() {});
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#cases-content').slideDown('slow', function() {
    $('#details-cases').addClass('selected');
        //Remove other classes
        $('#details-speakers').removeClass('selected');
        $('#details-sessions').removeClass('selected');
        $('#details-workshops').removeClass('selected');
  });
});

petraszd · Accepted Answer · 2010-06-23 21:46:39Z

2

Ctrl+C and Ctrl+V programming leads straight to hell... I think you can do something like that:

var divs = $('#details-speakers, #details-sessions, #details-cases');

divs.click(function () {
    divs.not(this).add('#home').slideUp('slow');
    // animation with home and body
    $(this).slideDown('slow', function () {
        $(this).addClass('selected');
        divs.not(this).removeClass('selected');
    });
}

And performance depends on a lot of thing (firebug is on, divs' content, divs' style, half-transparent backgrounds etc.) -- not just poor javascript.

answered Jun 23, 2010 at 21:46

petraszd

4,3051 gold badge22 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Over a year ago

I don't think this is correct/the same thing as the question.

Peter Ajtai Over a year ago

Haven't tested your code, but it does look like you're missing a ");" at the very end.

Mark Over a year ago

It's also not $(this).slideDown(). You need to create 2 sets of selections, one for the content boxes and another for the links.

Peter Ajtai Over a year ago

I like the use of divs.not(this)

Mark · Accepted Answer · 2010-06-23 21:40:04Z

1

The smoothness or lackthereof is not the fault of your code. Some browsers are slow. It's just not something that can be fixed from JS.

You can make your code shorter but I don't think there will be any material performance improvements.

$('#details-speakers').click(function() {
    $('#home, #sessions-content, #cases-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#speakers-content').slideDown('slow', function() {
        $('#details-speakers').addClass('selected');
        //Remove other classes
        $('#details-sessions, #details-cases, #details-workshops').removeClass('selected');
  });
});

$('#details-sessions').click(function() {
    $('#home, #speakers-content, #cases-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#sessions-content').slideDown('slow', function() {
    $('#details-sessions').addClass('selected');
        //Remove other classes
        $('#details-speakers, #details-cases, #details-workshops').removeClass('selected');
  });
});

$('#details-cases').click(function() {
    $('#home, #speakers-content, #sessions-content').slideUp('slow');
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
  $('#cases-content').slideDown('slow', function() {
    $('#details-cases').addClass('selected');
        //Remove other classes
        $('#details-speakers, #details-sessions, #details-workshops').removeClass('selected');
  });
});

edited Jun 23, 2010 at 21:40

answered Jun 23, 2010 at 21:33

Mark

33.9k34 gold badges109 silver badges139 bronze badges

2 Comments

Peter Ajtai Over a year ago

You're still copy and pasting essentially the same code two times.

Mark Over a year ago

I only intended to answer the question about the smoothness, and if this question wasn't about performance I would've refactored the code as well. The other answers are definitely more elegant and better in general, but the long way is still marginally faster.

David Perlman · Accepted Answer · 2010-06-23 21:39:43Z

0

If it's a cleaner approach you're looking for how about something like this:

$(".my4Divs").click(function() {
    var self = this;
    $(".my4Divs").each(function() {
       if(self == this) {
          $(self).addClass("selected");
          ...
          ...
          return;
       }
       $(this).removeClass("selected");
       ...
       ...
    });
});

answered Jun 23, 2010 at 21:39

David Perlman

1,4701 gold badge12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Show/Hide div on click using jQuery

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related