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.
<!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 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.geeksforgeeks.org/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.
<!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 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.geeksforgeeks.org/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 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="#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