Lesson 12/16 $(this).toggleClass('active'); - not working for me


#1



When I change the line below from
$('.projects-button').toggleClass('active');
to
$(this).toggleClass('active');
it does not work. I had it working a few days ago, but now I must be doing something wrong.
There is no error message and all projects still show up under all 3 skillsets.

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

$(document).ready(main);


#2

Now click on the 'Recent Project' buttons within each section and see that only the button you click on will toggle its class.

Next up, let's toggle the projects in the section we clicked on, instead of toggling them all.

The above will toggle all the projects, not just the one we clicked on. How might we target ONLY the .projects within the current choice?


12. this
#3

I'm still lost on this exercise. I think I am following the instructions that say to "modify the selector attached to .toggleClass('active'). Which I think is this: $(this).toggleClass('active');
Can you give me another hint, so I can continue to figure this out?


#4

Examine the HTML surrounding the item you clicked. Where in the document tree is the .projects UL? Hint: next() to the button you clicked. It is the next sibling. See if this doesn't point you in the right direction, (may require some reading on docs.jquery.com).


#5

I have been reading and looking at this for hours and still do not see what I am missing. Can you please tell me, so I can continue on with this course? Thanks


#6

Actually, I may be misunderstanding what this is supposed to do. If I use the $(this).toggleClass('active'); then is the desired result that only the button I click on turns brown, but all of the projects in each section are still showing?


#7

Instead of the above, which toggles all UL's of the class, consider the following...

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

Notice how it is written? The second line inside the function is a continuation of the first (hence no semi-colon on the first), and could be written on the first. This is known as chaining. We toggle the class on the clicked button and simultaneously toggle its immediate sibling.

<button></button>    <-- this
<ul> ... </ul>       <-- this.next

#8

This was very helpful and I appreciate your helping me. I used your code and then my code and they both did the same thing. I will need to research the .slideToggle () function. Thank you.

$('.projects-button').on('click',
function () {

$(this).next().toggle();

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

});


#9

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