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:

http://jsfiddle.net/vinicius5581/flyy931s/

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

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -