Skip to content
Related Articles

Related Articles

Foundation CSS Responsive Accordion Tabs Sass Reference

Improve Article
Save Article
  • Last Updated : 27 Sep, 2022
Improve Article
Save Article

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:

Variable Name Description Type Default-Value
$accordion-background  This variable defines the default text color for items in a Menu.  Color $white 
$accordion-plusminus  This variable is used to define the plus and minus icons on the side of each accordion title. Boolean true
$accordion-plus-content  This variable is used to define the content for the plus icon when $accordion-plusminus is true. String  ‘\002B’ 
 
$accordion-minus-content  This variable is used to define the content for the minus icon when $accordion-plusminus is true String ‘\2013’ 
 
$accordion-title-font-size  This variable is used to define the font size of accordion titles. Number rem-calc(12) 
 
$accordion-item-color  This variable defines the default text color for items in a Menu. Color $primary-color 
 
$accordion-item-background-hover  This variable defines the default background color on hover for items in a Menu. Color $light-gray 
 
$accordion-item-padding  This variable is used to define the default padding of an accordion item. Number or List  1.25rem 1rem 
 
$accordion-content-background  This variable is used to define the default background color of tab content. Color $white 
 
$accordion-content-border  This variable is used to define the default border color of tab content. Color 1px solid $light-gray 
 
$accordion-content-color  This variable is used to define the default text color of tab content. Color $body-font-color 
 
$accordion-content-padding  This variable is used to define the default padding for tab content. Number or List  1rem
$tab-margin  This variable is used to define the default margin of the tab bar. Number
 
$tab-background  This variable is used to define the default background color of a tab bar. Color $white 
 
$tab-color  This variable is used to define the font color of the tab item. Color $primary-color 
 
$tab-background-active  This variable is used to define the Active background color of a tab bar. Color $light-gray 
 
$tab-active-color  This variable is used to define the active font color of the tab item. Color $primary-color 
 
$tab-item-font-size  This variable is used to define the font size of tab items. Number rem-calc(12) 
 
$tab-item-background-hover  This variable defines the default background color on hover for items in a Menu.   $white 
 
$tab-item-padding  This variable is used to define the default padding of a tab item. Number 1.25rem 1.5rem 
 
$tab-content-background  This variable is used to define the default background color of tab content. Color $white 
 
$tab-content-border  This variable is used to define the default border color of tab content. Color $light-gray 
 
$tab-content-color  This variable is used to define the default text color of tab content. Color $body-font-color 
 
$tab-content-padding  This variable is used to define the default padding for tab content. Number or List  1rem 
 

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Responsive Accordion Tabs</title>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
    <!-- jQuery CDN -->
    <script src=
    </script>
    <!-- Foundation CSS JavaScript -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <div style="width:1100px;">
        <ul class="accordion"
            data-responsive-accordion-tabs="accordion large-tabs">
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>HTML</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>
                        HTML stands for HyperText Markup Language.
                        It is used to design web pages using a markup
                        language. It is the combination of Hypertext
                        and Markup language. Hypertext defines the link
                        between the web pages.
                    </p>
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>CSS</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>CSS (Cascading Style Sheets) is a stylesheet language
                        used to design the webpage to make it attractive. The
                        reason for using this is to simplify the process of
                        making web pages presentable. It allows you to apply
                        styles to web pages. More importantly, it enables you
                        to do this independent of the HTML that makes up each
                        web page.</p>
  
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>JavaScript</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>JavaScript is the world most popular lightweight,
                        interpreted compiled programming language. It
                        is also known as scripting language for web pages.
                        It is well-known for the development of web pages,
                        many non-browser environments also use it. JavaScript
                        can be used for Client-side developments as well as
                        Server-side developments.</p>
  
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>Bootstrap</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>Bootstrap is a free and open-source tool collection
                        for creating responsive websites and web
                        applications. It is the most popular HTML, CSS, and
                        JavaScript framework for developing responsive,
                        mobile-first websites. Nowadays, the websites are
                        perfect for all the browsers (IE, Firefox, and
                        Chrome) and for all sizes of screens (Desktop, Tablets,
                        Phablets, and Phones).
                    </p>
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>Reactjs</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>React is a declarative, efficient, and flexible
                        JavaScript library for building user interfaces.
                        It’s ‘V’ in MVC. ReactJS is an open-source,
                        component-based front-end library responsible only
                        for the view layer of the application. It is
                        maintained by Facebook.</p>
  
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Responsive Accordion Tabs</title>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
    <!-- jQuery CDN -->
    <script src=
    </script>
    <!-- Foundation CSS JavaScript -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <div style="width:700px;">
        <ul class="accordion"
            data-responsive-accordion-tabs="accordion large-tabs">
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>HTML</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>
                        HTML stands for HyperText Markup Language.
                        It is used to design web pages using a markup
                        language. It is the combination of Hypertext
                        and Markup language. Hypertext defines the link
                        between the web pages.
                    </p>
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>CSS</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>CSS (Cascading Style Sheets) is a stylesheet language
                        used to design the webpage to make it attractive. The
                        reason for using this is to simplify the process of
                        making web pages presentable. It allows you to apply
                        styles to web pages. More importantly, it enables you
                        to do this independent of the HTML that makes up each
                        web page.</p>
  
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>JavaScript</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>JavaScript is the world most popular lightweight,
                        interpreted compiled programming language. It
                        is also known as scripting language for web pages.
                        It is well-known for the development of web pages,
                        many non-browser environments also use it. JavaScript
                        can be used for Client-side developments as well as
                        Server-side developments.</p>
  
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>Bootstrap</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>Bootstrap is a free and open-source tool collection
                        for creating responsive websites and web
                        applications. It is the most popular HTML, CSS, and
                        JavaScript framework for developing responsive,
                        mobile-first websites. Nowadays, the websites are
                        perfect for all the browsers (IE, Firefox, and
                        Chrome) and for all sizes of screens (Desktop, Tablets,
                        Phablets, and Phones).
                    </p>
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#"    class="accordion-title">
                    <h6>Reactjs</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p>React is a declarative, efficient, and flexible
                        JavaScript library for building user interfaces.
                        It’s ‘V’ in MVC. ReactJS is an open-source,
                        component-based front-end library responsible only
                        for the view layer of the application. It is
                        maintained by Facebook.</p>
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!