jquery toggle

Gallex · 2013-10-23 13:30:27

then the h3 element is clicked, show the content inside the div element below it. then the button element inside that div is clicked, hide the div. and here is code i’m using:

$("h3.hide, button.hide").click(function () {
        $("div.hide").toggle("slow");
});

everything working correctly until there is only one h3 and div element with hide class. but then there is more than one h3 and div element with hide class, it shows all the divs with hide class then the first h3 element is clicked. but i have more than one and i need them to show/hide one-by-one. can you help me?

Last edited by Gallex (2013-10-23 13:49:38)

etc · 2013-10-23 13:41:43

Try this:

$("h3.hide").click(function () {
        $(this).next("div.hide").toggle("slow");
});

$("button.hide").click(function () {
        $(this).parents("div.hide").toggle("slow");
});

Gallex · 2013-10-23 13:50:27

brilliant! thank you oleg!

Last edited by Gallex (2013-10-23 13:50:59)

etc · 2013-10-23 15:55:13

Fine, but I would rather do it this way: remove div.hide { display:none } CSS rule, and add

$("div.hide").hide();

Otherwise js-disabled users won’t be able to see your content, unless they disable css too.

Gallex · 2013-10-24 06:34:10

like this:

$("h3.hide").click(function () {
        $(this).next("div.hide").toggle("slow");
$("div.hide").hide();
});

$("button.hide").click(function () {
        $(this).parents("div.hide").toggle("slow");
});

etc · 2013-10-24 17:29:23

Not exactly:

$("div.hide").hide();

$("h3.hide").click(function () {
        $(this).next("div.hide").toggle("slow");
});

$("button.hide").click(function () {
        $(this).parents("div.hide").toggle("slow");
});

Gallex · 2013-12-16 13:30:42

very similar situation, but stuck again – doesn’t open a div.

my goal: span element with hide class inside paragraph should open the div below.

<p>Eesti Loodusuurijate Seltsi ornitoloogiasektsiooni esimehe Heinrich Veromanni kirjutatud <span class="hide">avanumbri saatesõna.</span></p>

<div class="hide">

<p>Palju aastaid puudus Eesti Loodusuurijate Seltsi ornitoloogiasektsiooni juhatusel võimalus enam-vähem korrapärase info saatmiseks loodusvaatlejatele.</p>

<button class="hide">Close</button>
</div>

my code:

$("div.hide").hide();

$("span.hide").click(function () {
        $(this).next("div.hide").toggle("slow");
});

$("button.hide").click(function () {
        $(this).parents("div.hide").toggle("slow");
});

colak · 2013-12-16 14:22:22

Hi Gallex should that be show in your code? I see slow there.

Also maybe this will be of help

Gallex · 2013-12-16 14:48:48

no, because oleg’s previous code for h3 element works well

uli · 2013-12-16 16:14:50

Gallex wrote:

$("span.hide") […]

Don’t see that in your HTML.

Last edited by uli (2013-12-16 16:15:39)

Gocom · 2013-12-16 16:28:31

…and even if there is, its searching div.hide node from the wrong place. Its not a sibling of the span, one up in the tree. So, you must climb or change selecting method. This:

$(this).next("div.hide").toggle("slow");

Would become:

$(this).parent().next("div.hide").toggle("slow");

Gallex · 2013-12-17 08:47:51

thank’s jukka

Textpattern CMS

Textpattern CMS support forum

#1 2013-10-23 13:30:27

jquery toggle

#2 2013-10-23 13:41:43

Re: jquery toggle

#3 2013-10-23 13:50:27

Re: jquery toggle

#4 2013-10-23 15:55:13

Re: jquery toggle

#5 2013-10-24 06:34:10

Re: jquery toggle

#6 2013-10-24 17:29:23

Re: jquery toggle

#7 2013-12-16 13:30:42

Re: jquery toggle

#8 2013-12-16 14:22:22

Re: jquery toggle

#9 2013-12-16 14:48:48

Re: jquery toggle

#10 2013-12-16 16:14:50

Re: jquery toggle

#11 2013-12-16 16:28:31

Re: jquery toggle

#12 2013-12-17 08:47:51

Re: jquery toggle

Board footer