slideToggle

slideToggle

Hi,

I have a simple problem and i'm stuck since i can't figure this out.

I have some <p> followed by a <span> like this:

<p class="headerClass">Header</p><span class = "textClass">Headertext</span>

<p class="headerClass">Header</p><span class = "textClass">Headertext</span>

<p class="headerClass">Header</p><span class = "textClass">Headertext</span>

<p class="headerClass">Header</p><span class = "textClass">Headertext</span>
...



Simple CSS file:

.headerClass { font-weight: bold; color:blue; }
.textClass { font-weight: normal; color:Black; }


Here is what i want to do:

I need to show only the headers on startup of page (news.aspx). These headers + text are generated in code-behind, reading from DB.

Each time i click on one header the slideToggle effect on the span tag
should come into effect.

JS-file:

$(function() {

    $('p.headerClass').click(function() {  $('span.textClass').slideToggle("slow"); });

});


But this toggles ALL span.textClass on the page, i want to toggle that one specific to the <p> i clicked on.

I've read on that you can take something like $('p.headerClass:first') and etc but it doesn't seem to work.

Suggestions or solutions appreciated

Daniel Svensson from Sweden