Foundation Collapsible List
When you want to hide part of the content from display, you can use a collapsible list.
Example
<li class="accordion-navigation">
<a href="#demo">Simple Collapsible</a>
<div id="demo" class="content">
Rookie Tutorial -- Learning is not only technology, but also dreams!!!
</div>
</li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Try it Yourself »
Example analysis
.accordionclass anddata-accordionThe attribute is used to create a collapsible element..accordion-navigationThe class is used to render collapsible elements. The actual content is in.contentIn the class (<div class="content"), clicking the button will display it.
We add to the list items<a>element to control (show/hide) the collapsible content. Then the anchor link uses the same id as the collapsible content (associated with <a href=#demo" and <div id="demo">).
Note:The collapsible effect requires initializing Foundation JS.
By default, collapsible content is hidden. We can do this by<div>add to.activea class to make them visible by default:
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
<li class="accordion-navigation">
<a href="#demo">Accordion Example 1</a>
<div id="demo" class="content active">
Demo 1 - Example Tutorial -- Learning is not only about technology, but also 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 - Example Tutorial -- Learning is not only about technology, but also about dreams!!!
</div>
</li>
</ul>
Try it Yourself »
By default, one accordion list item is open. If you want to close them all, you can usedata-options="multi_expand:true;"Property:
Example
..
</ul>
Try it Yourself »