Open In App

Foundation CSS Accordion and URLs

Improve
Improve
Like Article
Like
Save
Share
Report

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=
 
    <!-- jQuery CDN -->
    <script src=
    </script>
 
    <!-- Foundation CSS JavaScript -->
    <script src=
    </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=
                        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=
 
    <!-- jQuery CDN -->
    </script>
 
    <!-- Foundation CSS JavaScript -->
    <script src=
    </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=
                        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



Last Updated : 27 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads