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

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -