Need some quick jQuery help

[Lace]

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?

$(document).ready(function(){
	$("#expanderHead").click(function(){
		$("#expanderContent").slideToggle();
		if ($("#expanderSign").text() == "+"){
			$("#expanderSign").html("−")
		}
		else {
			$("#expanderSign").text("+")
		}
	});
});

<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>

[sarettah]

I am not a jquery expert but I think your problem is because of duplicate ids. I do believe that ids need to be unique.

Just a quick guess.

.

[Lace]

Originally Posted by sarettah

I am not a jquery expert but I think your problem is because of duplicate ids. I do believe that ids need to be unique.

Just a quick guess.

.

Writing duplicate script and css with different ID's would be quite tedious, extensive and overkill though. I have another example without the - / +, but I need that.


Here's the other one.

jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});

[sarettah]

Originally Posted by Lace

Writing duplicate script and css with different ID's would be quite tedious, extensive and overkill though. I have another example without the - / +, but I need that.

I have dome similar coding with just straight javascript and passing an id into a function.

I have not used jquery much though so I am not sure of the best way to do it there.

Doing it with just javascript on the onclick is fairly easy.


.

[Lace]

Hmm...going to try this http://jsfiddle.net/sYwER/5/

Just might work for what I need.

Edit: Nope, unordered and ordered lists are not hidden.

[sarettah]

Originally Posted by Lace

Hmm...going to try this http://jsfiddle.net/sYwER/5/

Just might work for what I need.

Edit: Nope, unordered and ordered lists are not hidden.

Taking what you had and then a little from what you found:

Script:

$(document).ready(function(){
	$(".head").click(function(){
		$(this).find(".expanderContent").slideToggle();
		if ($(this).find(".expanderSign").text() == "+"){
			$(this).find(".expanderSign").html("−")
		}
		else {
			$(this).find(".expanderSign").text("+")
		}
	});
});

Changed up the html a touch to wrap each of your sections in a div:

<div class=head>
<h4 class="expanderHead">
	HEADER 1<span class="expanderSign">+</span>
</h4>
<div class="expanderContent" style="display:none">
TEXT HERE
</div>
</div>

<div class=head>
<h4 class="expanderHead">
	HEADER 2 <span class="expanderSign">+</span>
</h4>
<div class="expanderContent" style="display:none">
TEXT HERE
</div>
</div>

 <div class=head>
<h4 class="expanderHead">
	HEADER 3 <span class="expanderSign">+</span>
</h4>
<div class="expanderContent" style="display:none">
TEXT HERE
</div>
</div>

http://madspiders.com/divtest.htm

[Lace]

Awesome!!! Thanks, sarettah!