Open In App

Foundation CSS Responsive Accordion Tabs Sass Reference

Last Updated : 27 Sep, 2022
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.

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 0 
 
$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=
"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>
    <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= 


"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> 


    <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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Foundation CSS Responsive Accordion Tabs
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Foundation CSS Responsive Accordion Tabs
            

        
    
        
            

                Foundation CSS Responsive Accordion Tabs Basics
            

        
    
        
            

                Foundation CSS Tabs Sass Reference
            

        
    
        
            

                Foundation CSS Accordion Sass Reference
            

        
    
        
            

                Foundation CSS Accordion Menu Sass Reference
            

        
    
        
            

                Foundation CSS Responsive Embed Sass Reference
            

        
    
        
            

                Foundation CSS Callout Sass Reference
            

        
    
        
            

                Foundation CSS Slider Sass Reference
            

        
    
        
            

                Foundation CSS Dropdown Menu Sass Reference
            

        
    
        
            

                Foundation CSS XY Grid Sass Reference
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        krishna_97                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox