3

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.

Improve this question
3
  • Well, you're using the same class "flippanel" for both sections - which naturally will make both sections toggle accordingly. Commented Nov 10, 2014 at 14:01
  • 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. Commented Nov 10, 2014 at 14:31
  • 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. Commented Nov 10, 2014 at 14:34

6 Answers 6

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This one works really well! Many thanks - the other solutions were also useful, but this seems the simplest for me to deploy. Best, Jim
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!
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.
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.
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.

Improve this answer

Comments

1

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

Improve this answer

Comments

0

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>
Improve this answer

Comments

0 
$(".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>
Improve this answer

3 Comments

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?
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
btw: feel free to accept the answer, if it fits your needs:-)
-2

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();
    });
});
Improve this answer

2 Comments

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.