Foundation CSS Responsive Accordion Tabs Basics

Foundation CSS is a front-end framework used for responsive websites, apps, and emails for any device. It also has many front-end templates like Bootstrap, Semantic UI, and other Front-end frameworks. It is flexible, readable and it is completely customizable. Top tech giants like Adobe, Amazon, Cisco, Hp, Mozilla, Samsung, etc. are using Foundation CSS. 

In this article, we are going to build a simple webpage with responsive accordion tabs basics in Foundation CSS.

Responsive Accordion Tabs: One of the Foundation CSS Containers, these are used to responsively swap between two components at various breakpoints. Until the specific topic is clicked, the content of a heading or topic is hidden. Other topic content will be automatically hidden, and the content will be presented as a drop-down box. From one device to another, it will responsively switch from tabs to lists and vice versa.

Foundation CSS Responsive Accordion Tabs Basics Classes:

For accordion layout:

• accordion: This class when added to an unordered list turns it into an accordion component.
• accordion-item: This class when added to list items turns them into accordion components.
• accordion-title: This class is used to specify the title for each accordion item.
• accordion-content: This class is added to hold the content under each accordion item.

Syntax:

<ul class="accordion" data-responsive-accordion-tabs=". . .">
 <li class="accordion-item is-active" data-accordion-item>
 <a href="#" class="accordion-title">. .</a>
 <div class="accordion-content" data-tab-content>
 <!--Tab content goes here--!>
 </div>
 </li>
</ul>

For Tab Layout:

• tabs: This class is used to hold all the list elements which are transformed into tab elements.
• tabs-title: This class is used to specify the title of the respective tabs.
• tab-content: This class is used to add content for respective tabs.
• tabs-panel: This class adds the panel which will be shown when the respective tab is clicked upon.

Syntax:

<ul class="tabs" data-responsive-accordion-tabs=". . ." id="example-tabs">
 <li class="tabs-title is-active">
 <a href="#panel1" aria-selected="true">. .</a>
 </li>
 <li class="tabs-title">
 <a href="#panel2">....</a>
 </li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
 <div class="tabs-panel is-active" id="panel1">
 <!--Tab content--!>
 </div>
 <div class="tabs-panel" id="panel2">
 <!--Tab content--!>
 </div>
</div>

Foundation CSS Responsive Accordion Tabs Basics Attributes:

• [data-responsive-accordion-tabs]: This attribute is used to state how the tabs will act when the screen sizes are changed, it takes the values of the default layout to medium or small screen size, then in large screen size.
• [data-tab-content]: This attribute is added to the container with the accordion content.
• [data-tabs-content="idOfTabs"]: This attribute is added to the container with the content of the tab, it takes the id of the tabs container.

Example 1: The code below demonstrates the usage of the accordion tabs and changes it to the tabs layout when the screen size is medium.

Output:

👁 Image

Example 2: The code below demonstrates the usage of the tabs layout and changes it to an accordion layout when the screen size is medium.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/responsive-accordion-tabs.html#basics