jQuery toggle on multiple divs with same class

Question

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.

Solution 1

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.

Solution 2

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.

Solution 3

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

Comments

[entiendoNull]

Well, you're using the same class "flippanel" for both sections - which naturally will make both sections toggle accordingly.

[James Davies]

Hi entiendoNull, I realise that - I was asking for guidance as to how to have a potentially infinite number of flip panels, so this was an iterative example.

[James Davies]

I also wasn't particularly clear on my actual requirements - I need a toggle button of some description (i.e. the 'Flip it!' bit), and then I need a container full of content. I'm using this to show multiple 'buy' cart widgets on a webpage - it's for a training company, where one course can have a variety of distribution options.

[James Davies]

This one works really well! Many thanks - the other solutions were also useful, but this seems the simplest for me to deploy. Best, Jim

[James Davies]

Ah - I've just discovered a problem with this. If you click on anything inside the flip, it acts as a toggle. I need the toggle to be separate, so that it stays when you've got it open. Probably wasn't clear at the beginning!

[James Davies]

This seem to work really well - I can actually wrap the content in a div so it only goes for the next element. Any ideas how I make it so that all the flip panels start off closed?

[cari]

edited answer, added wrapper div, made cursor a pointer and changed bad class names. consider giving the div its own class and outsource the display:hidden in the css. same goes for the cursor:pointer, which belongs to the .flip class

[Brandon Knight]

Ah, yeah this solution packs everything into two divs. So if you click any space within those two divs, it will collapse the div itself. I was kind of assuming you just wanted two collapsible panels.

[Brandon Knight]

James, I would still recommend for you to separate your panels into two separate divs. (Or however many you have) This will make future code easier to write, easier to handle, etc. I'm not sure how the rest of the site is supposed to be designed but if you want two separate 'panels' it sounds like you are discribing divs.

[cari]

btw: feel free to accept the answer, if it fits your needs:-)

[Zsolt Meszaros]

Please, just don't. Don't suggest someone to repeat code. Instead, check the previous answers and learn from them (and consider deleting this answer).

[Ab-Sadiq]

I can observed your insistence on "not to tell someone to repeat a code" without stating the implications which will certainly convince me to stop as you want. But not only your series of "don't". Or what else do even mean please. Thanks for your anticipated cooperation.