Foundation Collapse List

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

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>可折叠实例</h2>
<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">简单的可折叠实例</a>
    <div id="demo" class="content">
     php中文网 --  php中文网！！
    </div>
  </li>
</ul>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Example analysis

.accordion class and data-accordion attributes are used to create a collapsible element. .accordion-navigation Class is used to render collapsible elements. The actual content is in the .content class (<div class="content"), which can be displayed by clicking the button.

We add the <a> element to the list item to control (show/hide) the collapsible content. Then the anchor link uses the same id as the collapsible content content (<a href=#demo" vs. <div id="demo"> associated).

Note: Collapsible effects require Foundation JS to be initialized.

By default, collapsible content is hidden. We can make it display by default by adding the .active class on <div>:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>可折叠实例</h2>
<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
   <a href="#demo">简单的可折叠实例</a>
    <div id="demo" class="content active">
      php中文网 --  php中文网！！
    </div>
  </li>
</ul>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

##Accordion effect

Accordion effect is used Extending and setting collapsible content.

The accordion effect is created by using multiple different anchor links with ids:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>手风琴实例</h2>
<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#demo">手风琴 1</a>
    <div id="demo" class="content active">
      Demo 1 - php中文网 --  php中文网！！
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo2">手风琴 2</a>
    <div id="demo2" class="content">
      Demo 2 - php中文网 --  php中文网！！
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">手风琴 3</a>
    <div id="demo3" class="content">
      Demo 3 - php中文网 --  php中文网！！
    </div>
  </li>
</ul>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance» Click the "Run Instance" button to view the online instance

By default, one of the accordion list items is open. If you want to close all you can use

data-options="multi_expand:true;" Attribute:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>手风琴实例</h2>
<ul class="accordion" data-accordion data-options="multi_expand:true;">
  <li class="accordion-navigation">
    <a href="#demo">手风琴实例 1</a>
    <div id="demo" class="content">
      Demo 1 - php中文网 --  php中文网！！
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo2">手风琴实例 2</a>
    <div id="demo2" class="content">
      Demo 2 - php中文网 --  php中文网！！
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#demo3">手风琴实例 3</a>
    <div id="demo3" class="content">
      Demo 3 - php中文网 --  php中文网！！
    </div>
  </li>
</ul>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

RunInstance»Click the "Run Instance" button to view the online instance