Foundation collapse the list
When you want to hide part of the display, you can collapse the list.
Examples
<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>
try it"
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:
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
<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 ....
</ 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>
try it"
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>
try it"