Foundation collapses the list

May 04, 2021 Foundation5

Foundation collapses the list

You can use collapsed lists when you want to hide the display of parts of content.

Instance

< ul class= "accordion" data-accordion >
< li class= "accordion-navigation" >
< a href= "#demo" > Simple Collapsible < /a >
< div id= "demo" class= "content" >
W3Cschool online tutorial -- Learn technology, starting with W3Cschool!
< /div >
< /li >
< /ul >

The !-- initialize Foundation JS
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .

Instance resolution

.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>

Instance

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

Try it out . . .

Accordion effect

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

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

Instance

< ul class= "accordion" data-accordion >
< li class= "accordion-navigation" >
< a href s "#demo" and an accordion example 1 slt; /a >
< div id= "demo" class= "content active" >
Demo 1 - W3Cschool online tutorial -- Learn technology, starting with W3Cschool!
< /div >
< /li >
< li class= "accordion-navigation" >
< a href s "#demo2" and an accordion example 2 slt; /a >
< div id= "demo2" class= "content" >
Demo 2 - Lorem ipsum dolor sit amet....
< /div >
< /li >
< li class= "accordion-navigation" >
< a href s "#demo3" and an accordion example 3 slt; /a >
< div id= "demo3" class= "content" >
Demo 3 - W3Cschool online tutorial -- Learn technology, starting with W3Cschool!
< /div >
< /li >
< /ul >

Try it out . . .

By default, one of the accordion list items is open. I f you want to turn data-options="multi_expand:true;"

Instance

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

Try it out . . .

Foundation collapses the list

Table of contents

Foundation collapses the list

Instance

Instance resolution

Instance

Accordion effect

Instance

Instance

Cookie Consent