I am currently exploring the most effective approach to accomplish this task. My goal is to expand/collapse all hidden divs on a given page. While this is usually not an issue, I have four distinct sections that necessitate independent expand/collapse functionalities. As such, I am trying to avoid writing four separate scripts utilizing four different ids as selectors.
I came across the following snippet:
$(function() {
$('.expand').click(function() {
$('#test *').nextAll('.silent').slideToggle();
});
});
This code works seamlessly when expanding a single section. Therefore, my idea is to leverage jQuery to retrieve the parent div's class or id (as they will be unique by requirement) containing the expand button. Subsequently, I can apply the selector * class to it before executing a nextAll function, resolving my dilemma.
Here is a straightforward fiddle demonstrating my progress thus far, should you need further clarification. The objective is to utilize the "expand" button for each section to expand the corresponding sections below it without affecting the others (with a unified script) jsfiddle
I appreciate any assistance you may offer in advance.