Hi
I'm just learning jQuery and have some troubles with the selectors.
I'm using this (found in the basic training file) to show and hide a
Blockquote paragraph.
$('#content').find('blockquote').hide().end().find('h5').click(function
() {
$(this).next().next().slideToggle('slow');
$("h6:first").slideToggle('slow');
});
Basically I have a <h5> with a title, then a <p> with the first
paragraph of text, and then I have the rest of the text wrapped in a
<blockquote> tag (this is all WordPress, that's why the syntax might
be a little strange).
Under the blockquote I have a <h6>Click for more...</h6> which I'd
like to hide when the blockquote is shown.
This is then repeated a couple of times.. something like:
<h5>Title</h5>
<p>Intro</p>
<blockqoute><p>The rest of the text</p></blockqoute>
<h6>Click for more...</h6>
<h5>Title</h5>
<p>Intro</p>
<blockqoute><p>The rest of the text</p></blockqoute>
<h6>Click for more...</h6>
<h5>Title</h5>
<p>Intro</p>
<blockqoute><p>The rest of the text</p></blockqoute>
<h6>Click for more...</h6>
Now the code I have works fine for the first set of lines (when I
click the <h5> the <blockquote> slides out and the <h6> slides away.
But "h6:first" is (apparently) relative to the whole document and not
to the <h5> you just clicked, so when I click the second <h5> it's the
<h6> in the first set that disappears.
How can I write it so that only the first <h6> after the <h5> is
toggled?
Thank you!
