13/16 If I only want to toggle only one


#1

The instruction say to do this:

$('.projects-button').on('click', function() {
    $(this).toggleClass('active');
    $(this).next().toggle();
}); 

it works, but I don’t get the logic…if I only want it to toggle only one
this item at a time and next() will select the other next item so if I click on this item, but it toggles the next item… so why does this works when I want to toggle only the one I’m clicking on?

https://www.codecademy.com/courses/learn-javascript/lessons/javascript-dom/exercises/next?action=lesson_resume


#4

That line only toggles the active class so the color changes when the dropdown is open.

open  :  brown
closed:  white

That line toggles the visibility of the dropdown from hide to show and vice-versa. If we study the HTML,

        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Broadway</li>
          <li>MOVE</li>
        </ul>

we see that projects-button and pojects are sibling elements. We click the button, which is the event context for the class toggle, but the dropdown visibility is set on the next sibling.

Side note: Since the context is the same for both handler actions, we can chain the two together…

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

Further side note: Seems I read somewhere that toggle is deprecated or soon to be. It is recommended that we use, slideToggle in its place.

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

#5

Extra Study

What about having the button text change when the menu is open? Is that doable?

open  : 'Projects Viewed'
closed: 'Recent Projects'

#6

I want to say we have to use If else statement.

I was trying to duplicate another function for off/again click:
$(’.project-buttons).off(‘click’, function() {
$(this).next().slideToggle(400);
$(this).toggleClass(‘active’);
$(this).text(‘Recent Projects’);
});
}

I know this isn’t correct but I also tried this (just want to make sure I got the concept down):
if (‘click’) {
$(this).next().slideToggle(400);
$(this).toggleClass(‘active’);
$(this).text(‘Projects Viewed’);
}
else () {
$(this).text(‘Recent Projects’)
}


#7

We have a toggleClass already in our handler, so we can leverage that.

    if (!$(this).hasClass('active')) {
      $(this).text('Recent Projects');
    }

The way we set it is with a direct command every time this handler runs. This is one way of doing it…

function main() {
  $('.skillset').hide().fadeIn(1000);
  $('.projects').hide();
  $('.projects-button').on('click', function() {
    $(this).toggleClass('active')
           .text('Projects Viewed')     // <-- Always ON
           .next().slideToggle(400);
    if (!$(this).hasClass('active')) {
      $(this).text('Recent Projects');  // conditional toggle
    }
  });
}
$(document).ready(main);

When we want it to toggle back to normal when it does not have the active class set. That’s why, 'not this has class ‘active’. The other value always gets set every time the handler is triggered.

The .off() method is for removing an event listener. We don’t want to do that because this is a session listener, not a one-time event listener.


#8

This topic was automatically closed after 7 days. New replies are no longer allowed.