15 Slide toggle


#1

https://www.codecademy.com/courses/learn-javascript/lessons/javascript-dom/exercises/slide-toggle?action=lesson_resume&link_content_target=interstitial_lesson

I using the below code for the JavaScript file (please note I did comment out some lines). My question is (I passed the exercise..so it says), but now when I click any of the "Recent Project" buttons, the "Recent Project" buttons change to a background color of black while "sliding up" and disappear. Then the "projects" are left static because the "Recent Project " buttons are gone. Is this correct?

I guess I want to make sure I clearly understand everything before I move forward. Thanks in advance.

function main(){
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function(){
  $('.projects').toggle();
//   $('.projects-button').toggleClass('active');
// $(this).next().toggle();
 $(this).slideToggle(400);  $(this).toggleClass('active');
 $(this).text('Projects Viewed');
  }   
);
}                    

$(document).ready(main);

#2

Since the selector is the same in both statements, we can chain the methods...

$('.skillset').hide().fadeIn(1000);

The methods execute in the order they are written.

Inside the click handler, I would write the following line first:

$(this).toggleClass('active');

followed by,

$(this).text('Projects Viewed');

That takes care of the button, off the top. In essence, we can chain all the methods again, since they too have all the same selector. The projects class is a sibling of the button, so it too can be chained with the next() method.

  $('.projects-button').on('click', function() {
    $(this).toggleClass('active')
    .text('Projects Viewed')
    .next().slideToggle(400);
  });

The reason your button is disappearing is this line:

Note how we avoided this in the above example, (using next()).


#3

First, i want to say thanks for your help!!!
ok, now I'm really confused..I changed the code to your specs (well at least I think I did).
Now when I click the 1st button, the button changes color and the skillsets drop down and slide away.

Clicking the second button, the first and third skillsets drop down, the second button turns black (with no skillsets)

Clicking the third button, the first button turns white, the second and third skillsets drop down.

I go back and look at the instructions and I SMH. To my understanding, $(this) refers to the button(parent) you just clicked and .next() refers to the child (in this case skillset).

function main(){
$('.skillset').hide();
$('.skillset').fadeIn(1000);
$('.projects').hide();
$('.projects-button').on('click',
function(){
$('.projects').toggle();
// $('.projects-button').toggleClass('active');
// $(this).next().toggle();
$(this).toggleClass('active')
.text('Projects Viewed')
.next().slideToggle(400);

}
);
}

$(document).ready(main);


#4

It does not refer to the child, but the sibling. The button is not the parent. It's parent is.

  <div class='skillset'>
    <div class='skill-html'>
      <h1>HTML &amp; CSS</h1>
      <div class='description'>                            <!-- parent -->
        <div class='projects-button'>Recent Projects</div>   <!-- sibling -->
        <ul class='projects'>                                <!-- sibling -->
          <li>Broadway</li>
          <li>MOVE</li>
        </ul>
      </div>
    </div>

Your code,

toggles all the projects, not just the one next to the button you clicked. That is why I used next() so we stay in the same parent context as the button.


#5

After playing with the code for awhile, I changed:
$('.projects').toggle(); ==> $('.projects').next().toggle();

Everything seems to work now, was that what you were trying to get me to realize? Or did the JQuery Gods just shine down on me..LOL. I've seen with the hierarchy in CSS sometimes you can get it right, but it's bad coding.


#6

You are still targeting all the projects, not the one in event object context. There is nothing next to .projects so nothing should happen.

The event context is the button you clicked. Its sibling is the element to manipulate.

$(this)      // the button
    .next()  // its sibling (the projects div)

Further to this, sometimes cached values are more descriptive than selectors alone, and they are re-usable, should we get that far.

function main() {
  var $skillset = $('.skillset');
  var $projects = $('.projects');
  var $projectsButton = $('.projects-button');
  $skillset.hide().fadeIn(1000);
  $projects.hide();
  $projectsButton.on('click', function() {
    $(this).toggleClass('active')
           .text('Projects Viewed')
           .next().slideToggle(400);
  });
}

We can add restorability inside the click handler, as well...

  $projectsButton.on('click', function() {
    $(this).toggleClass('active')
           .text('Projects Viewed')
           .next().slideToggle(400);
    if (!$(this).hasClass('active')) {
      $(this).text('Recent Projects');
    }
  });

#7

Thanks for bearing with me!! I think I have a better understanding now. Well its off to the next exercise for me.. enjoy your Saturday!!


#11