Foundation CSS Responsive Accordion Tabs Sass Reference

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.

Variable Used:

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the Responsive Accordion Tabs.

SASS Code:

$accordion-background: white;
.accordion {
 background-color:$accordion-background;
}

Compiled CSS Code:

.accordion {
 background-color: white;
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the Responsive Accordion Tabs.

SASS Code:

$accordion-content-border: 1px solid lightgrey;
.accordion {
 border:$accordion-content-border;
}

Compiled CSS Code:

.accordion {
 border: 1px solid lightgrey; 
}

Output:

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