You can nest tabs or accordions by giving the nested tab set extra names/ids.
To create nested sets, give the tabs/accordion of the nested set an extra name or id, like:
{tab-whatever}...{/tabs-whatever}
{accordion-whatever}...{/accordions-whatever}
Don't forget to close each set with a closing tag using the same extra id (in these examples: {/tabs-whatever}
and {/accordions-whatever}
). If you don't close every set, you will get unwanted results.
If you want to nest an accordion set inside a tab, you do not need to add the extra id.
And in the same way, if you want to nest a tab set inside an accordion, you can simply use the normal tags.
Below is an example using nested tabs. But you can do the same with nested accordions, using the {accordion-...}
tags.
Example
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Example Tab 1
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Example Tab 1.1
Example Tab 1.1.1
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Example Tab 1.1.2
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Example Tab 1.1.3
Nullam dictum felis eu pede mollis pretium.
Integer tincidunt.
Example Tab 1.2
Cras dapibus.
Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.
Example Tab 2
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum.
Example Accordion 1
Example Accordion 1.1
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Example Accordion 1.2
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Example Accordion 1.3
Nullam dictum felis eu pede mollis pretium.
Integer tincidunt.
Example Accordion 2
Curabitur ullamcorper ultricies nisi.
Nam eget dui.
Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{tab title="Example"} [TEXT] {tab-ex title="Example Tab 1"} [TEXT] {tab-ex_sub1 title="Example Tab 1.1"} {tab-ex_sub1_sub1 title="Example Tab 1.1.1"} [TEXT] {tab-ex_sub1_sub1 title="Example Tab 1.1.2"} [TEXT] {tab-ex_sub1_sub1 title="Example Tab 1.1.3"} [TEXT] {/tabs-ex_sub1_sub1} {tab-ex_sub1 title="Example Tab 1.2"} [TEXT] {/tabs-ex_sub1} {tab-ex title="Example Tab 2"} [TEXT] {accordion title="Example Accordion 1"} {accordion-ex title="Example Tab 1.1"} [TEXT] {accordion-ex title="Example Accordion 1.2"} [TEXT] {accordion-ex title="Example Accordion 1.3"} [TEXT] {/accordions-ex} {accordion title="Example Accordion 2"} [TEXT] {/accordions} [TEXT] {/tabs-ex} {/tabs}