[RESOLVED] Help with a JQuery script - selecting a p after a h1 and...

[sciguyryan]

Hi guys!

I've been trying to put together a JQuery script that does the following but so far I have had no success at all. If anyone can help out with this I'd be more appreciative.

I'm looking for a jQuery script that looks for all the h1's in a document who's next sibling is a p element. There can be multiple of these on a page like this:

<h1>Blah</h1>
<p>
// Some content goes in here.
</p>

<h1>Blah2</h1>
<p>
// Some content goes in here.
</p>

Now. I'd like to make it so that when the h1 element is clicked it hides the p element with all of it's contents. I can't seem to figure out how to do this.

[kows]

while I can't directly help you, I have a suggestion if you could change the markup. it might be easier to just have a <div> containing the h1 and paragraph elements with a specific class name, or something.

[SambaNeko]

$("h1").click(function(){
  $(this).next("p").hide();
});

Attaches a click event function to all <h1>, which uses the next() method, specified to find a <p> tag only, and hide it. If you need to toggle visibility instead, you'll just need some if/else logic in the function.

Tis one of the nice things about jQuery - rarely will you need to adjust your markup to accommodate it.

[sciguyryan]

Thanks SambaNeko. That was just what I was looking for. What I has was more complex - guess simpler is often better.