Menu icon Foundation
Nesting tabs in accordion doesn't work

Nesting tabs in an accordion using shortcodes doesn't seem to work. Here's an example of what I'm trying to accomplish:
http://foundation.zurb.com/docs/components/accordion.html

Here's what I have:

[section-container type="accordion"][section title="Accordion Title 1" active="active"]
[section-container type="tabs"][section title="tab 1" ]Content from tab 1 goes in here. [/section][section title="tab 2"]Content from tab 2 goes in here. [/section][/section-container]
[section title="Accordion 2" active="active"] Content from accordion 2 goes in here.[/section][section title="Accordion 3" active="active"] Content from accordion 3 goes in here.[/section][/section-container]
            

         

The result is that the tabs are not nested inside the accordion but considered as accordion elements except for the first one. Here's what it looks like:

Screen shot 2014 10 24 at 3.28.54 pm

Any help would be very appreciated.
Thank you

nested shortcodetabsaccordion

Nesting tabs in an accordion using shortcodes doesn't seem to work. Here's an example of what I'm trying to accomplish:
http://foundation.zurb.com/docs/components/accordion.html

Here's what I have:

[section-container type="accordion"][section title="Accordion Title 1" active="active"]
[section-container type="tabs"][section title="tab 1" ]Content from tab 1 goes in here. [/section][section title="tab 2"]Content from tab 2 goes in here. [/section][/section-container]
[section title="Accordion 2" active="active"] Content from accordion 2 goes in here.[/section][section title="Accordion 3" active="active"] Content from accordion 3 goes in here.[/section][/section-container]
            

         

The result is that the tabs are not nested inside the accordion but considered as accordion elements except for the first one. Here's what it looks like:

Screen shot 2014 10 24 at 3.28.54 pm

Any help would be very appreciated.
Thank you

Alexander Assimidis almost 5 years ago

Why are you not using this Shortcut?

<dl class="accordion" data-accordion> <dd class="accordion-navigation"> <a href="#panel1">Accordion 1</a> <div id="panel1" class="content active"> <dl class="tabs" data-tab> <dd class="active"><a href="#panel2-1">Tab 1</a></dd> <dd><a href="#panel2-2">Tab 2</a></dd> <dd><a href="#panel2-3">Tab 3</a></dd> <dd><a href="#panel2-4">Tab 4</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</p> </div> </div> </div> </dd> <dd class="accordion-navigation"> <a href="#panel2">Accordion 2</a> <div id="panel2" class="content"> Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> <dd class="accordion-navigation"> <a href="#panel3">Accordion 3</a> <div id="panel3" class="content"> Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> </dl>