Foundation CSS Responsive Accordion Tabs Basics

Last Updated : 01 Jul, 2022

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.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- jQuery CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
  
    <!-- Foundation CSS JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Accordion Tabs Basics</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>GfG Logo</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                        alt="">
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>DS</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        A data structure is a particular way 
                        of organizing data in a computer so 
                        that it can be used effectively. For
                        example, we can store a list of items 
                        having the same data-type using the 
                        array data structure.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Algorithms</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        The word Algorithm means ” A  set of 
                        rules to be followed in calculations 
                        or other problem-solving operations 
                        ” Or ” A procedure for solving a 
                        mathematical problem in a finite number 
                        of steps that frequently by recursive 
                        operations “. 
                    </p>
 
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Competitive Programming</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        Competitive Programming is a mental 
                        sport which enables you to code a 
                        given problem under provided constraints. 
                        The purpose of this article is to 
                        guide every individual possessing a 
                        desire to excel in this sport. This 
                        article provides a detailed syllabus for 
                        Competitive Programming designed by 
                        industry experts 
                        to boost the preparation of the readers.
                    </p>
 
  
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>GfG</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        A Computer Science portal for geeks.
                        Gain and share your knowledge & skills 
                        with a variety of learning platforms 
                        offered by GeeksforGeeks. Billions of 
                        Users, Millions of Articles Published, 
                        Thousands Got Hired by Top Companies 
                        and the numbers are still growing. We 
                        provide a variety of services for
                        you to learn, thrive and also have fun!
                    </p>
 
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>C++</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        C++ is a general-purpose programming 
                        language and is widely used nowadays 
                        for competitive programming. It has 
                        imperative, object-oriented and generic 
                        programming features. C++ runs on lots 
                        of platforms like Windows, Linux, Unix, 
                        Mac etc.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Java</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content>
                    <p class="lead">
                        Java has been one of the most popular 
                        programming languages for many years.
                        Java is Object Oriented. However, it 
                        is not considered as pure object-oriented 
                        as it provides support for primitive 
                        data types (like int, char, etc)The Java 
                        codes are first compiled into byte code 
                        (machine-independent code). Then the 
                        byte code runs on Java Virtual Machine 
                        (JVM) regardless of the underlying 
                        architecture.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item"
                data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Python</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        Python is a high-level, general-purpose 
                        and a very popular programming language. 
                        Python programming language (latest Python 3) 
                        is being used in web development, Machine 
                        Learning applications, along with all cutting 
                        edge technology in Software Industry. Python 
                        Programming Language is very well suited for 
                        Beginners, also for experienced programmers 
                        with other programming languages
                        like C++ and Java.
                    </p>
 
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

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.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
 
    <!-- jQuery CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
 
    <!-- Foundation CSS JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Accordion Tabs Basics</h3>
    <div style="width:1100px;">
        <!-- Creating an unordered list as an accordion -->
        <ul class="accordion" data-responsive-accordion-tabs
            ="tabs medium-accordion large-tabs">
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>GfG Logo</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                        alt="">
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>DS</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        A data structure is a particular way 
                        of organizing data in a computer
                        so that it can be used effectively. 
                        For example, we can store a list
                        of items having the same data-type 
                        using the array data structure.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Algorithms</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        The word Algorithm means ” A set of 
                        rules to be followed in calculations 
                        or other problem-solving operations
                        ” Or ” A procedure for solving a 
                        mathematical problem in a finite number 
                        of steps that frequently by recursive 
                        operations “.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Competitive Programming</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        Competitive Programming is a mental 
                        sport which enables you to code a 
                        given problem under provided constraints.
                        The purpose of this article is to 
                        guide every individual possessing a desire 
                        to excel in this sport. This article
                        provides a detailed syllabus for Competitive
                        Programming designed by industry experts 
                        to boost the preparation of the readers.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>GfG</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">A Computer Science portal 
                        for geeks. Gain and share your knowledge 
                        & skills with a variety of learning 
                        platforms offered by GeeksforGeeks.
                        Billions of Users, Millions of Articles 
                        Published, Thousands Got Hired by Top 
                        Companies and the numbers are still 
                        growing. We provide a variety of services 
                        for you to learn, thrive and also have fun!
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>C++</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        C++ is a general-purpose programming 
                        language and is widely used nowadays 
                        for competitive programming. It has 
                        imperative, object-oriented and generic 
                        programming features. C++ runs on lots 
                        of platforms like Windows, Linux, Unix, 
                        Mac etc.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Java</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        Java has been one of the most popular 
                        programming languages for many years.
                        Java is Object Oriented. However, it 
                        is not considered as pure object-oriented 
                        as it provides support for primitive 
                        data types (like int, char, etc)
                        The Java codes are first compiled into 
                        byte code (machine-independent code).
                        Then the byte code runs on Java Virtual 
                        Machine (JVM) regardless
                        of the underlying architecture.
                    </p>
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">
                    <h6>Python</h6>
                </a>
                <div class="accordion-content" data-tab-content>
                    <p class="lead">
                        Python is a high-level, general-purpose 
                        and a very popular programming language. 
                        Python programming language (latest 
                        Python 3) is being used in web development, 
                        Machine Learning applications, along with 
                        all cutting edge technology in Software 
                        Industry. Python Programming Language is 
                        very well suited for Beginners, also for 
                        experienced programmers with other 
                        programming languages like C++ and Java.
                    </p>
 
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>