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