javascript - Jquery Selectors for multipe slideToogle -
how set selector specific each h1 , main within multiple repeated structure. need able click on h1 , open contained on same section per html bellow. per javascript bellow please answer var trigger , var content should accomplish requirements.
<section id="side_nav"> <!-- main --> <section> <header> <h1>main header</h1> <a href="#">call action</a> </header> <main> <div> <p><span>content</span><span>content</span></p> <p><span>content</span><span class="positive">content</span></p> </div> </main> </section> <!-- first sub --> <section> <header> <h1>first sub header</h1> <p>content</p> </header> <main> <div> <p><span>content</span><span>content</span></p> <p><span>content</span><span>content</span></p> </div> </main> </section> <!-- second sub --> <section> <header> <h1>second sub header</h1> <p>content</p> </header> <main> <div> <p><span>content</span><span>content</span></p> <p><span>content</span><span>content</span></p> </div> </main> </section> <!-- third sub --> <section> <header> <h1>third sub header</h1> <p>content</p> </header> <main> <div> <p><span>content</span><span>content</span></p> <p><span>content</span><span>content</span></p> </div> </main> </section> </section>
my current js looks this:
$(document).ready(function(){ var trigger = $("h1"); var content = $( "main" ); trigger.click(function(){ content.slidetoggle( "slow" ); }); });
here jsfiddle current code:
you need reference this
in trigger function , traverse dom content showing:
trigger.click(function(){ $(this).parent().siblings('main').slidetoggle( "slow" ); });
also want css hide <main>
content:
main { display:none; }
updated fiddle: http://jsfiddle.net/flyy931s/2/
Comments
Post a Comment