jquery ui - Accordion inside a Tabbed Navigation -
i creating simple page number of tabs, , inside each tab there 3 sections using accordion best solution want. works on first tab, accordion operates should , content rendered fine.
when click on tab2 content rendered text no accordion applied. have used dev tools , accordion class not being applied accordion div in tab2 reason. may missing fundamental here appreciate help.
excuse basic code layout here demonstration purpose html might like.
<body> <h1 class="maintitle">page title</h1> <div id="tabs"> <ul> <li><a href="#tabs-1">tab 1</a></li> <li><a href="#tabs-2">tab 2</a></li> </ul> <div id="tabs-1"><!-- start of tabs-1 --> <div id="accordion"> <h3>section 1</h3> <div> section general information relating project. </div> <h3>section 2</h3> <div> section 1 content </div> <h3>section 2</h3> <div> section 2 content </div> </div><!-- end of accordion --> </div><!-- end of tabs-1 --> <div id="tabs-2"><!-- start of tabs-2 --> <div id="accordion"> <h3>section 1</h3> <div> section general information relating project. </div> <h3>section 2</h3> <div> section 1 content </div> <h3>section 2</h3> <div> section 2 content </div> </div><!-- end of accordion --> </div><!-- end of tabs-2 --> </div><!-- end of tabs --> </body>
you have multiple divs same id, namely accordion. either name them seperately, or use class selector. example:
<body> <h1 class="maintitle">page title</h1> <div id="tabs"> <ul> <li><a href="#tabs-1">tab 1</a></li> <li><a href="#tabs-2">tab 2</a></li> </ul> <div id="tabs-1"> <div class="accordion"> <h3>section 1</h3> <div> section general information relating project. </div> <h3>section 2</h3> <div> section 1 content </div> <h3>section 2</h3> <div> section 2 content </div> </div><!-- end of accordion --> </div><!-- end of tabs-1 --> <div id="tabs-2"><!-- start of tabs-2 --> <div class="accordion"> <h3>section 1</h3> <div> section general information relating project. </div> <h3>section 2</h3> <div> section 1 content </div> <h3>section 2</h3> <div> section 2 content </div> </div><!-- end of accordion --> </div><!-- end of tabs-2 --> </div><!-- end of tabs --> </body>
and then:
$( ".accordion" ).accordion();
Comments
Post a Comment