You can use a collapse list when you want to hide the display of some of the content. 尝试一下 » We add to the list item 注意： Collapsible effects require initialization of Foundation JS. By default, collapsible content is hidden. We can pass through the 尝试一下 » The accordion effect is used to extend and set collapsible content. Accordion effects are created by using several different anchor links and id: By default, one of the accordion list items is open. If you want to close everything that can be used 8.14.1. Example ¶
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo">Simple Collapsible</a>
<div id="demo" class="content">
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Case analysis ¶
.accordion
Class and
data-accordion
Property is used to create a collapsible element.
.accordion-navigation
Class is used to render collapsible elements. The actual content is in
.content
Class (< div class= “content”), click the button to display.
<a>
Element to control (show / hide) collapsible content. The anchor link then uses the same id as the collapsible content (< a href=#demo “is associated with < div id=” demo “>).
<div>
Add on
.active
Class to display by default: 8.14.2. Example ¶
<div id="demo" class="content active">
Accordion effect ¶
8.14.3. Example ¶
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo">手风琴实例 1</a>
<div id="demo" class="content active">
Demo 1 - 菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2">手风琴实例 2</a>
<div id="demo2" class="content">
Demo 2 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">手风琴实例 3</a>
<div id="demo3" class="content">
Demo 3 - 菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</li>
</ul>
data-options="multi_expand:true;"
Attributes: 8.14.4. Example ¶
<ul class="accordion" data-accordion data-options="multi_expand:true;">
..
</ul>