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.

Output:

👁 Image

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. 

Output:

👁 Image

Reference: https://get.foundation/sites/docs/accordion.html#accordion-and-urls