Many people have posed this question. I am attempting to create a functionality where a div can expand and collapse using a +/- button. I have 5 divs with class=="expanderContent". When the function below is triggered by a click, all 5 items expand or collapse at once.
Heading - Inner Inner Heading2 - Inner2 Inner2 Heading3 + .....
When I click the + next to Heading2, I only want Heading2 to expand or collapse, not all of them. The headings and content are inside the same div. Therefore, I need to identify which #expanderHead was clicked and only expand or collapse that specific sister .expanderContent, not all of them.
$(document).ready(function(){
$("#expanderHead").click(function(){
$(".expanderContent").slideToggle('2000', "linear", function () {
// Animation complete.
});
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
});
HTML (These are identical data, but won't be in production)
// HTML code here... ==== UPDATE ========
Probably not much help as it won't run in JSFiddle but does on my webserver.