CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
James Davies
James Davies

Reputation: 114

jQuery toggle on multiple divs with same class

I am trying to get a jQuery toggle up and running on my site.

So far my code is:

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel").toggle();
  });
});
</script>

I then in the HTML have:

<p class="flip">Flip it!</p>
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

How do I go about getting it to toggle the two panels independently? Right now, each panel toggles at the same time.

Upvotes: 3

Views: 11745

Answers (6)

Ab-Sadiq
Ab-Sadiq

Reputation: 31

I think Your jQuery code is ok for the first flip it! I am suggesting you should create another for the second flip it! And you need to change your second flip it HTML tag classes

From:

<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

To:

<p class="flip2">Flip it!</p>
<p class="flippanel2 ">This is a paragraph with little content.</p>
<p class="flippanel2">This is another small paragraph.</p>

Then the jQuery codes to add:

$(document).ready(function(){ 
    $(".flip2").click(function(){
        $(". flippanel2").toggle();
    });
});

Upvotes: -2

Brandon Knight
Brandon Knight

Reputation: 532

So it looks like you want the flippanel class items to hide themselves when you click "flip it"? I would then recommend you instead put these inside of a div so that when you click on it, the whole div collapses.

That way you can do something like:

$(".flip").click(function(){
  $(this).children().toggle();
});

If you think this is the code for you, but don't like that everything inside of the div is clickable, you can add the following code Additionally, if you think this is the solution for you, you could add the following code which will make it such that only the "Flip it!" part is clickable. I've updated my fiddle below to include this code.

$(".flippanel").click(function( event ) {
  event.stopPropagation();
});

I've made a JSFiddle for you if you click this line to look.

Upvotes: 5

cari
cari

Reputation: 2300

$(".flip").click(function(){
      $(this).next().toggle();
      $(this).next().next().toggle();
});

will work.

http://jsfiddle.net/xyqwmzhj/2/

but you really should consider rewriting your html, use the same classes for the content and going with children or something like that.

[edit] if you want it to start closed, add

style="display: none;"

to the div that should be hidden.

full html:

<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>
<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

What you need is to use .nextUntil(). It will get every next element until you hit the passed selector.

$(".flip").click(function(){
  $(this).nextUntil('.flip').toggle();
});

Note that the passed selector is excluded from the object.

Upvotes: 2

Der Vampyr
Der Vampyr

Reputation: 951

Numbers are not valid as html class.

Try it like this:

<p class="flip flip_1">Flip it!</p>
<p class="flippanel flippanel_1">This is a paragraph with little content.</p>
<p class="flippanel flippanel_1">This is another small paragraph.</p>
<p class="flip flip_2">Flip it!</p>
<p class="flippanel flippanel_2 ">This is a paragraph with little content.</p>
<p class="flippanel flippanel_2">This is another small paragraph.</p>

This way your styling e.g. can attach to the flippanel class and your JS can look like this:

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel_1").toggle();
  });
});
</script>

Upvotes: 0

laaposto
laaposto

Reputation: 12213

Select the next two p .flippanel of the one you click each time.

nextAll select all following siblings

slice(0, 2) narrows to the first two

Try:

$(".flip").click(function(){
    $(this).nextAll(".flippanel").slice(0, 2).toggle();
  });

DEMO

Upvotes: 1

Related Questions