GoFuckYourself.com - Adult Webmaster Forum - Need some quick jQuery help

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Need some quick jQuery help (https://gfy.com/showthread.php?t=1078104)

Need some quick jQuery help

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? :helpme

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>

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.

.

Quote:

Originally Posted by sarettah (Post 19127323)

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.

Code:

jQuery(document).ready(function() {

  jQuery(".content").hide();

  //toggle the componenet with class msg_body

  jQuery(".heading").click(function()

  {

    jQuery(this).next(".content").slideToggle(500);

  });

});

Quote:

Originally Posted by Lace (Post 19127329)

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.

.

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. :(

Quote:

Originally Posted by Lace (Post 19127338)

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:

Code:

$(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:

Code:

<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

Awesome!!! Thanks, sarettah!