May 04, 2021 Foundation5
You can use collapsed lists when you want to hide the display of parts of content.
.accordion
class and
data-accordion
property are used to create a collapsible element.
.accordion-navigation
used to render collapsible elements.
The actual content is in the
.content
class ( .lt;div class. "content"), and the button can be displayed at the click of a button.
We add elements to the
<a>
control (show/hide) the collapsible content.
The anchor link is then associated with the same id ('lt;a href=#demo" as the content of the collapsible content.
Note: The collapsible effect requires initializing Foundation JS.
By default, collapsible content is hidden.
We can make the .active class appear by default by
.active
it to the
<div>
The accordion effect is used to extend and set collapsible content.
The accordion effect is created by using several different anchor links and ids:
By default, one of the accordion list items is open. I
f you want to turn
data-options="multi_expand:true;"