JavaScript and the DOM


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:

  1. We can attach next to any jQuery selector to select the next direct element.
  2. Then, we can attach any jQuery function to next(). In this case, we attached hide, which would hide the next element after the $('.item-one') element.
Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.