Open In App

Foundation CSS Responsive Accordion Tabs

Improve
Improve
Like Article
Like
Save
Share
Report

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”.

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>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Accordion Tabs</h3>
    <div style="width: 1100px;">
        <!-- Creating an unordered list as an accordion -->
        <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>


Output:

Foundation CSS Responsive Accordion Tabs

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”.

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>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Accordion Tabs</h3>
    <div style="width: 1100px;">
        <!-- Creating an unordered list as an accordion -->
        <ul class="accordion"
            data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
            <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>


Output:

Foundation CSS Responsive Accordion Tabs

Foundation CSS Responsive Accordion Tabs

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



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads