Foundation CSS Responsive Accordion Tabs
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 = "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;" >w3wiki</ 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:
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 = "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;" >w3wiki</ 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:
Reference: https://get.foundation/sites/docs/accordion.html