In order to toggle the projects in each section, we will need to use
$(this) to select the button we clicked on. The issue is that
$(this) refers to the
projects-button in our current code, and not the projects themselves.
We need a way to select the
projects elements next to the button that we clicked.
Luckily, jQuery can select elements logically. In index.html, notice that the
projects-button element is directly followed by the
projects list. Therefore the
projects element is next after it.
jQuery has a function named
next to help us select elements that are next to another element. If we have this in our HTML:
<div class='item-one'> ... </div>
<div class='item-two'> ... </div>
If we wanted to hide
item-two, we could write:
- We can attach
next to any jQuery selector to select the next direct element.
- Then, we can attach any jQuery function to
next(). In this case, we attached
hide, which would hide the next element after the