Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Jackson
Paul Jackson
8,943 Points

Same <button> .slideUp and .slideDown trouble...?

I've created a button that, when clicked, slides the div down and makes it larger. I'm trying to make it so when I click the same button, that div retracts back into itself. This is as far as I've gotten:

$('#calendar').click(function(){
     $(".calendarContent").slideDown();
     $(".calendarContent").addClass("retract");
      if ($(".calendarContent").hasClass('retract')) {
         $("#calendar").click(function(){
           $(".calendarContent").slideUp();
           $(".calendarContent").removeClass('retract');
         });
      }
   });

This allows me to successfully click the button to extend the div and then can click the same button to retract it. But after another click, a loop is created and it just extends and retracts with one click, rather than staying extended until I click it again.

A little help to solve this?

3 Answers

John Magee
John Magee
Courses Plus Student 9,058 Points

Is there a reason you chose not to use slideToggle (jquery usually has a toggle option for things that have contrary paths of the same function, ie sliding up, sliding down)

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Paul,

John is correct; it would make sense to use .slideToggle() here rather than individually calling .slideUp() and .slideDown(). If you absolutely wanted to use those two, you could write your function like this:

// we need only write one click handler...
$('#calendar').click(function(){

  // ...and inside that handler, the first thing we do is check for our target class...
  if($('.calendar-content').hasClass('retract')) {

    // ...if our target class is found, we remove that class, and slideUp...
    $('.calendar-content').removeClass('retract');
    $('.calendar-content').slideUp();

  } else { // ...but if the class is not found...

    // ...we add the class, and then slideDown!
    $('.calendar-content').addClass('retract');
    $('.calendar-content').slideDown();
  }
});

But, with .slideToggle(), you don't need to do all that, and you don't even need to toggle your classes! You can simply write:

// we have one click handler...
$('#calendar').click(function(){

        // ...and on click, jQuery does the work of checking the state of your targeted element, and toggles the slide for you!
    $('.calendar-content').slideToggle();
});

Erik

Paul Jackson
Paul Jackson
8,943 Points
Paul Jackson
Paul Jackson
8,943 Points

The only reason I did not use .slideToggle is because I was not aware it was an option :) Awesome.

I also appreciate the fact walk through using the other code too.

Thanks so much!