Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accordion inside a Tabbed Navigation

I am creating a simple page with a number of tabs, and inside each tab there will be 3 sections which I am using an accordion for as this is the best solution for what I want. Everything works perfectly on the first tab, the accordion operates as it should and the content is rendered fine.

When I click on tab2 the content is rendered as just text with no accordion applied. I have used the dev tools and the accordion class is not being applied to the accordion div in tab2 for some reason. It may be that I am missing something really fundamental here but I would appreciate any help.

Excuse the basic code layout here but for demonstration purpose this is what the html might look 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>
        This section is for general information relating to this 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>
        This section is for general information relating to this 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>
like image 548
Jd_Daniels Avatar asked Oct 01 '22 17:10

Jd_Daniels


1 Answers

You have multiple divs with the same id, namely accordion. Either name them seperately, or use a class with your selector. For 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>
        This section is for general information relating to this 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>
        This section is for general information relating to this 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();
like image 197
ChrisSwires Avatar answered Oct 18 '22 01:10

ChrisSwires