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 in Foundation CSS.

Responsive Accordion Tabs: These are one of the Foundation CSS Containers that are used to switch between two components at different breakpoints responsively. The content of a heading or a topic will be hidden until the particular topic was clicked. The content will be displayed as a drop-down box and other topic content will be automatically hidden. It will switch between tabs to list and vice versa from device to device responsively.

Foundation CSS Responsive Accordion Tabs Classes:

• accordion: This class is used to make the unordered List into an accordion.
• accordion-item: This class is used to make the list items to accordion items.
• accordion-title: This class is used to set the title for the respective accordion items.
• accordion-content: This class is used todisplay the content under its respective accordion item.

Foundation CSS Responsive Accordion Tabs Attributes:

• data-responsive-accordion-tabs: This attribute is used to make the accordion change from Tabs to List responsively when the webpage size is changed.
• data-responsive-accordion-tabs: This attribute is used to make the accordion change from Tabs to List and List to Tabs responsively when the webpage width changes respectively.
• data-accordion-item: This attribute is used to display the content when the accordion item is clicked.
• data-tab-content: This attribute is used to display the content when the accordion item is clicked.

Syntax:

<ul class="accordion" 
    data-responsive-accordion-tabs="accordion large-tabs">
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">
            // Accordion title
        </a>
        <div class="accordion-content" data-tab-content>
            // Accordion content
       </div>
    </li>
</ul>

Example 1: In this example, the accordion will be listed as a tab when the webpage’s width is wide and will be listed as lists when the width is narrow. We will use the data-responsive-accordion-tabs=”accordion large-tabs”.

Output:

Foundation CSS Responsive Accordion Tabs

Example 2: In this example, the accordion will be listed as a list when the webpage’s width is wide and it will be listed as tabs when the width is medium and at last it will be again listed as a list when the width is narrow. We use data-responsive-accordion-tabs=”accordion medium-tabs large-accordion”.

Output:

Foundation CSS Responsive Accordion Tabs

Reference: https://get.foundation/sites/docs/accordion.html