Foundation Accordion List

When you want to hide the display of certain content, you can use an accordion list.

Example

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">Simple Collapsible</a>
    <div id="demo" class="content">
      tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </li>
</ul>
<!-- Initialize Foundation JS -->
<script>
  $(document).ready(function() {
    $(document).foundation();
  })
</script>

Example Explanation

The .accordion class and data-accordion attribute are used to create a collapsible element. The .accordion-navigation class is used to render the collapsible element. The actual content is within the .content class (<div class="content">), which can be displayed by clicking the button.

We add an <a> element in the list item to control (show/hide) the collapsible content. The anchor link uses the same id as the collapsible content (<a href="#demo" is associated with <div id="demo">).

Note: The collapsible effect requires initializing Foundation JS.

By default, the collapsible content is hidden. We can make it displayed by default by adding the .active class to the <div>:

Example

<div id="demo" class="content active">

Accordion Effect

The accordion effect is used to expand and set collapsible content.

The accordion effect is created by using multiple different anchor links and ids:

Example

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">Accordion Example 1</a>
    <div id="demo" class="content active">
      Demo 1 - tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo2">Accordion Example 2</a>
    <div id="demo2" class="content">
      Demo 2 - Lorem ipsum dolor sit amet....
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">Accordion Example 3</a>
    <div id="demo3" class="content">
      Demo 3 - tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </li>
</ul>

By default, one of the accordion list items is open. If you want to close all, you can use the data-options="multi_expand:true;" attribute:

Example

<ul class="accordion" data-accordion data-options="multi_expand:true;">
  ..
</ul>