Foundation CSS Accordion and URLs
Foundation CSS is a framework that makes it simple to create stunning responsive websites, apps, and emails that look wonderful and are available on any device, an open-source and responsive front-end framework created by the ZURB foundation in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, much like SaaS. It is easier to customize, more adaptable, and more advanced. It also includes CLI, making it simple to use with module bundlers. It provides the Fastclick.js tool for mobile device rendering that is quicker.
Accordions are the elements that are very handy in arranging and navigating various sections in a single container. We are able to simply retrieve and store a lot of data in a systematic manner using this accordion.
In this article, we going to discuss accordion and URLs. This is specifically very useful in adding the address of the sections of the container to the browser history. Besides that, this is also very handy when we want to redirect to a specific section or panel. For adding this feature we don’t need to add any specific class we need to add the data-deep-link=”true” to the accordion container. Also, we need to add the data-update-history=”true” to the same which will ensure that the browsing history is updated every time an accordion tab is clicked.
Syntax:
<ul class="accordion" data-accordion data-deep-link="true" data-update-history="true"> <li class="accordion-item" data-accordion-item> ... </li> <li class="accordion-item" data-accordion-item> ... </li> </ul>
Example 1: The code below demonstrates how to add the URL feature to the accordion container.
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;" >w3wiki</ h1 > < h3 >Foundation CSS Accordion and URLs</ h3 > < div style = "width:1100px;" > <!-- Creating an unordered list as an accordion --> < ul class = "accordion" data-accordion data-deep-link = "true" data-update-history = "true" > < li class = "accordion-item" data-accordion-item> < a href = "#first" class = "accordion-title" > < h6 >GfG Logo</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "first" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt = "" > </ div > </ li > < li class = "accordion-item" data-accordion-item> < a href = "#second" class = "accordion-title" > < h6 >DS</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "second" > < 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 = "#third" class = "accordion-title" > < h6 >Algorithms</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "third" > < 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 = "#four" class = "accordion-title" > < h6 >Competitive Programming</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "four" > < 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 > </ ul > </ div > < script > $(document).foundation(); </ script > </ body > </ html > |
Output:
Example 2: The code below demonstrates the implementation of deep linking to an accordion container that has a data-allow-all-closed=”true” attribute added to it. This attribute allows all the tabs to be closed at the same time.
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;" >w3wiki</ h1 > < h3 >Foundation CSS Accordion and URLs</ h3 > < div style = "width: 1100px;" > <!-- Creating an unordered list as an accordion --> < ul class = "accordion" data-accordion data-deep-link = "true" data-update-history = "true" data-allow-all-closed = "true" > < li class = "accordion-item" data-accordion-item> < a href = "#first" class = "accordion-title" > < h6 >GfG Logo</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "first" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt = "" > </ div > </ li > < li class = "accordion-item" data-accordion-item> < a href = "#second" class = "accordion-title" > < h6 >GfG</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "second" > < p class = "lead" > A Computer Science portal for Beginner. Gain and share your knowledge & skills with a variety of learning platforms offered by w3wiki. 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 = "#third" class = "accordion-title" > < h6 >C++</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "third" > < 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 = "#four" class = "accordion-title" > < h6 >Java</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "four" > < 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 = "#five" class = "accordion-title" > < h6 >Python</ h6 > </ a > < div class = "accordion-content" data-tab-content id = "five" > < 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:
Reference: https://get.foundation/sites/docs/accordion.html#accordion-and-urls
Contact Us