Accordion and Tab Code

WordPress users editing websites in the KSAS Academic Department theme (all KSAS academic department and program sites) must use the text editor to edit pages on which there are accordions or tabs. Content in accordions and tabs cannot be edited using the visual editor.

Below is the html code for accordions and tabs with explanations. Understanding this code may help you update the content within accordions and tabs successfully.

A screenshot of the text editor
Use the text editor to edit pages with accordions or tabs.

Accordions

For more information and to watch a video on how to create accordions, visit the Foundation website.

Here is an example of a group of accordions:

Here is the code that makes the accordions:

<ul data-accordion=”” class=”accordion” data-allow-all-closed=”true”>

This first piece of code creates the accordion group. You can have as many accordions as you like inside a group (the above example has two) and you can have multiple groups on a page. The last part of that line of code (data-allow-all-closed=”true”) allows all of your accordions in a group to be closed at the same time. This part of the code is optional, but if you do not include it, one of your accordions in every group will remain open.

<li data-accordion-item=”” class=”accordion-item”><a class=”accordion-title”>Accordion 1</a>

This piece of code creates an individual accordion inside a group. The first part (<li data-accordion-item=”” class=”accordion-item”>) creates the accordion and the second part (<a class=”accordion-title”>Accordion 1</a>) gives the accordion its title. If creating a new accordion, you would change “Accordion 1” to whatever you want the clickable title of the accordion to be.

<div class=”accordion-content” data-tab-content=””>

This piece of code wraps around the content in each accordion. The content is the text you see when the accordion opens.

</div>

If used with the <div class=”accordion-content” data-tab-content=””> code above, this tag signals the end of the content in an individual accordion.

</li>

If used with the <li data-accordion-item=”” class=”accordion-item”> code above, this tag signals the end of an individual accordion.

</ul>

If used with the <ul data-accordion=”” class=”accordion” data-allow-all-closed=”true”> code above, this tag signals the end of an accordion group.

Code Example

Here is the code that makes the accordions above:

<ul data-accordion=”” class=”accordion” data-allow-all-closed=”true”>
<li class=”accordion-item” data-accordion-item=””><a class=”accordion-title”>Accordion 1</a>
<div class=”accordion-content” data-tab-content=””>

Content in the first accordion.

</div></li>

<li class=”accordion-item” data-accordion-item=””><a class=”accordion-title”>Accordion 2</a>
<div class=”accordion-content” data-tab-content=””>

Content in the second accordion.

</div></li>
</ul>


Tabs

For more information and to watch a video on how to create tabs, visit the Foundation website.

Here is an example of a group of tabs:

Content in the first tab.

Content in the second tab.

Here is the code that makes the tabs:

<ul data-tabs=”” class=”tabs” id=”example-tabs”>

This first piece of code creates the group of tabs. You can have several tabs inside a group (the above example has two) but we don’t recommend having so many tabs that they start to fall down on to the next line. Technically you can have multiple groups of tabs on a page, but we don’t recommend that either. If you do have multiple groups of tabs on a page, each group will have to have a unique id. (The id for this set of tabs is “example-tabs”.)

<li class=”tabs-title is-active”><a href=”#panel1″>Tab 1</a></li>

This piece of code creates an individual tab inside a group. The first part (<li class=”tabs-title is-active”>) creates the tab. The is-active part of the code should only be used for the first tab in a group. The second part of this code (<a href=”#panel1″>Tab 1</a>) gives the tab its title. If creating a new tab, you would change “Tab 1” to whatever you want the clickable title of the tab to be. The full line of code must be repeated for every tab in a group, minus the is-active part. Each tab must also have a unique anchor link, which is “#panel1” in this example.

</ul>

If used with the <ul data-tabs=”” class=”tabs” id=”example-tabs”> code above, this tag signals the end of the list of tabs in a group.

<div data-tabs-content=”example-tabs” class=”tabs-content”>

This piece of code creates a space for content for all the tabs in a group. The id in this line of code (“example-tabs”) must match the id in the first piece of code.

<div class=”tabs-panel is-active” id=”panel1″>

This piece of code wraps around the content in each tab. The content is the text you see when you click on a tab. The id must match the anchor link in the <li class=”tabs-title is-active”><a href=”#panel1″>Tab 1</a></li> code. The is-active part of the code should only be used for the first tab in a group.

</div>

If used with the <div class=”tabs-panel is-active” id=”panel1″> code above, this tag signals the end of the content in an individual tab. If used with the <div data-tabs-content=”example-tabs” class=”tabs-content”> code above, this tag signals the end of the content for the entire tab group.

Code Example

Here is the code that makes the tabs above:

<ul class=”tabs” id=”example-tabs” data-tabs=””>
<li class=”tabs-title is-active”><a href=”#panel1″>Tab 1</a></li>
<li class=”tabs-title”><a href=”#panel2″>Tab 2</a></li>
</ul>

<div class=”tabs-content” data-tabs-content=”example-tabs”>
<div id=”panel1″ class=”tabs-panel is-active”>

Content in the first tab.

</div>
<div id=”panel2″ class=”tabs-panel”>

Content in the second tab.

</div>
</div>