Javascript and the DOM 13/16 next(); function help


#1

function main() {
$(’.skillset’).hide();
$(’.skillset’).fadeIn(1000);

$(’.projects’).hide();

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

$(document).ready(main);

// I completed the Javascript course but I seem to have trouble visualizing and understanding how the next(); function works. "next(); helps us select elements that are next to another element. On the webpage after it is used, only the “Recent Projects” button of that section toggles the project list. I might be thinking about it wrong but how does adding next(); result in that specific section only being toggled?


#2

the element with the class “projects-button” will execute:

slideToggle() to the NEXT element (might be a paragraph, an image or anything else that is next to the “projects-button”)