Specific item opened
By default, the first tab/accordion in a set will be the open one.
You can also set any other tab/accordion to be the default open tab instead by adding the open
attribute to that tab's tag and give it the value true
, like:
{tab title="This tab is now opened by default!" open="true"}
First tab
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This tab is now opened by default!
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Another tab
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.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{tab title="First tab"} [TEXT] {tab title="This tab is now opened by default!" class="green" open="true"} [TEXT] {tab title="Another tab"} [TEXT] {/tabs}
{accordion title="This accordion is now opened by default!" open="true"}
First accordion
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This accordion is now opened by default!
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Another accordion
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.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{accordion title="First accordion"} [TEXT] {accordion title="This accordion is now opened by default!" class="green" open="true"} [TEXT] {accordion title="Another accordion"} [TEXT] {/accordions}
Random item opened PRO
With the Pro version, you also have the ability to make a different tab/accordion open randomly every time the page is refreshed. This would allow showing different content when the page is revisited.
You can do so by placing an open="random"
parameter to the first tab/accordion in the set, like:
{tab title="First Tab" open="random"} ... {tab title="Second Tab"} ... {/tabs}
First Tab
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Second Tab
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Third Tab
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Fourth Tab
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{tab title="First Tab" open="random"} [TEXT] {tab title="Second Tab"} [TEXT] {tab title="Third Tab"} [TEXT] {tab title="Fourth Tab"} [TEXT] {/tabs}
Try refreshing this page and see the opened tab in this set being random every time.
All items closed
You can also decide to have no tab/accordion opened at all when you first load the page, by placing an open="false"
parameter to the first tab/accordion in the set, like:
{tab title="First Tab" open="false"} ... {tab title="Second Tab"} ... {/tabs}
First Tab
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Second Tab
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Third Tab
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Fourth Tab
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{tab title="First Tab" open="false"} [TEXT] {tab title="Second Tab"} [TEXT] {tab title="Third Tab"} [TEXT] {tab title="Fourth Tab"} [TEXT] {/tabs}
{accordion title="First Tab" open="false"} ... {accordion title="Second Tab"} ... {/accordions}
First Accordion
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Second Accordion
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Third Accordion
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Fourth Accordion
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{accordion title="First Accordion" open="false"} [TEXT] {accordion title="Second Accordion"} [TEXT] {accordion title="Third Accordion"} [TEXT] {accordion title="Fourth Accordion"} [TEXT] {/accordions}
Independent accordions
You can make accordions independent by simply making each accordion an own set. This method can be used for stuff like FAQ pages where you want to be able to have multiple accordions open at the same time.
If you have set up the page scrolling in the Tabs & Accordions plugin settings, you can add the scroll="false"
attribute to stop the page from scrolling to the accordions when you click to open them.
{accordion title="Question 1" scroll="false"}
Answer 1...
{/accordions}
{accordion title="Question 2" scroll="false"}
Answer 2...
{/accordions}
{accordion title="Question 3" scroll="false"}
Answer 3...
{/accordions}
Question 1
Answer 1...
Question 2
Answer 2...
Question 3
Answer 3...
If you want the accordions to be closed by default, you should add the open="false"
attribute to every accordion.
{accordion title="Question 1" open="false" scroll="false"}
Answer 1...
{/accordions}
{accordion title="Question 2" open="false" scroll="false"}
Answer 2...
{/accordions}
{accordion title="Question 3" open="false" scroll="false"}
Answer 3...
{/accordions}
Question 1
Answer 1...
Question 2
Answer 2...
Question 3
Answer 3...