Trying to code up a page to hide content on load, but expand once the header is clicked.
First header works, but the second and third are not at the moment. I need probably 15 different headers here. I'm no jQuery expert by far.
http://barcritic.com/toggle3.html
Anyone see what I'm doing wrong here?
Code:
$(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
});
Code:
<h4 id="expanderHead">
HEADER 1 <span id="expanderSign">+</span>
</h4>
<div id="expanderContent" style="display:none">
TEXT HERE
</div>
<h4 id="expanderHead">
HEADER 2 <span id="expanderSign">+</span>
</h4>
<div id="expanderContent" style="display:none">
TEXT HERE
</div>
<h4 id="expanderHead">
HEADER 3 <span id="expanderSign">+</span>
</h4>
<div id="expanderContent" style="display:none">
TEXT HERE
</div>