1. Home
  2. Foundation collapse the list

The best Foundation collapse the list Tutorial In 2024, In this tutorial you can learn Accordion effect,

Foundation collapse the list

When you want to hide part of the display, you can collapse the list.

Examples

<Ul class = "accordion" data -accordion>
<Li class = "accordion-navigation ">
<A href = "#demo"> Simple Collapsible </ a>
<Div id = "demo" class = "content">
This tutorial - science is not only technology, but also a dream! ! !
</ Div>
</ Li>
</ Ul>

<! - Initialization Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Examples of analytical

.accordion classes and data-accordion attribute is used to create a collapsible element. .accordion-navigation class used to render collapsible elements. The actual content .content class (<div class = "content" ) and click the button to display either.

We added to the list items <a> element to control (show / hide) The collapsible. Then anchor link with collapsible content with the same content id (<a href=#demo" 与<div id="demo"> associated).

Note: The folding effect needs to be initialized Foundation JS.

By default, the collapsible content is hidden. We can in the <div> Previous .active class is allowed to default display:

Examples

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

Accordion effect

Accordion effect for the extension and set the collapsible content.

Accordion effect by using a plurality of different anchors and id to create a link:

Examples

<Ul class = "accordion" data -accordion>
<Li class = "accordion-navigation ">
<A href = "#demo"> Accordion instance 1 </ a>
<Div id = "demo" class = "content active">
Demo 1 - tutorial - science is not only technology, but also a dream! ! !
</ Div>
</ Li>
<Li class = "accordion-navigation ">
<A href = "# demo2" > Accordion instance 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet /en/en
</ Div>
</ Li>
<Li class = "accordion-navigation ">
<A href = "# demo3" > Accordion instance 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - tutorial - science is not only technology, but also a dream! ! !
</ Div>
</ Li>
</ Ul>

By default, the accordion has a list item is open. If you want to close all can use data-options="multi_expand:true;" ;" properties:

Examples

<Ul class = "accordion" data -accordion data-options = "multi_expand: true;">
/en
</ Ul>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation collapse the list
10/30