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