Select p tag in div with id using h3 sibling tag with class

Question

Sorry if the above name is a bit confusing, writing these things in plain English is often harder than the problem inside!

I'm sure this is a pretty simple problem, but I'm a bit attached to jQuery and hierarchy selectors and now I don't see a tree for trees ... this is an exercise in the class, so I'm stuck with the HTML code as it is.

I am trying to hide / show paragraphs under the H3 heading by double clicking on the H3 heading.

<div class="chapter" id="chapter-preface"> <h3 class="chapter-title">Preface</h3> <p>Blah, blah, blah, blah, blah</p> <p>Blah, blah, blah, blah</p> <p>Blah, blah, blah</p> <p>Blah</p> </div> <div class="chapter" id="chapter-1"> <h3 class="chapter-title">Chapter 1</h3> <p>Rhubarb, rhubarb, rhubarb, rhubarb, rhubarb, rhubarb</p> <p>Rhubarb, rhubarb, rhubarb</p> </div> 

The closest I came to is the following jQuery code:

 $('.chapter-title').dblclick(function() { $('div p').toggleClass('hidden'); }); 

but, as this is probably fairly obvious, it only leads to hiding all p-tags under both divs. I want him to simply hide the p tags under the corresponding H3 heading, which was double clicked. I tried using 'this', but clearly wrong, as it did not have the desired effect.

I think I need to somehow select the parent div of the H3 tag that was clicked and the unique identifier associated with it, and then apply the hide / display event to any child p-tags inside ... any suggestions?

Hooray!

Answer 1

You can simply use .nextAll() or .siblings() to select all p elements following h3 in the parent div , without actually selecting the parent div :

 $('.chapter-title').dblclick(function() { $(this).nextAll('p').toggleClass('hidden'); }); 

Answer 2

Try the following:

 $('.chapter-title').dblclick(function() { $(this).siblings('p').toggleClass('hidden'); }); 

Answer 3

Using nextAll('p') , you will get all the elements following the current with the appropriate selector. toggle() will then hide / show them as needed and keep using your class.

Try the following:

 $('.chapter-title').dblclick(function() { $(this).nextAll('p').toggle(); }); 

Script example

Answer 4

You can use .nextAll or .siblings :

 $('.chapter-title').dblclick(function() { $(this).nextAll("p").toggleClass('hidden'); }); 

or

 $('.chapter-title').dblclick(function() { $(this).siblings("p").toggleClass('hidden'); }); 

Answer 5

why not just use toggle() instead of toggleClass ('hidden'), and in your case you only have para elements inside your div, so you can just write siblings() . but if you have other elements, then of course brothers and sisters ('p') is the way to go.

Here is the code

  $('.chapter-title').dblclick(function() { $(this).siblings().toggle(); }); 

Just if you need to know more:

working . When any of the headers clicks, it changes the CSS display:inline property to display:hidden , and when the header is clicked again, this CSS property goes back to display:inline . Yes! he restores it.