W3.CSS 手风琴
单击下面的 "Open Section" 按钮查看手风琴的工作原理：
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.
带图片的手风琴：
法国阿尔卑斯山
手风琴
手风琴用于显示（和隐藏）HTML 内容。
使用w3-隐藏隐藏手风琴内容的类。
使用任何类型的按钮打开和关闭内容：
示例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
用于打开折叠面板的元素和折叠面板的内容都可以是任何 HTML 元素。
手风琴与下拉菜单
下表显示了手风琴和下拉菜单之间的区别：
| 手风琴 | 落下 |
|---|---|
| 内容将页面内容向下推 | 内容覆盖现有页面内容 |
| 内容通常是 100% 宽 | 内容宽 160 像素（默认） |
| 常用于打开多个部分 | 常用于打开某一节 |
手风琴
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.
下拉菜单
手风琴按钮
您可以使用任何 HTML 元素来打开手风琴内容。我们更喜欢一个带有w3块类，跨越页面的整个宽度（100% 宽度）。
请记住，W3.CSS 中的按钮默认居中。使用w3-左对齐class 如果您希望它们左对齐。但是，您不必遵循我们的方法 - 无论哪种方式，手风琴都会看起来不错：
洛雷姆·伊普苏姆...
洛雷姆·伊普苏姆...
内容也居中！
示例
<button onclick="myFunc('Demo1')" class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
Centered and full-width</button>
<div id="Demo3" class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
活动手风琴按钮
使用 JavaScript 突出显示打开的（单击的）手风琴：
一些文字..
其他一些文字..
示例
// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
手风琴宽度
默认情况下，块的宽度为 100%。要覆盖此设置，请更改折叠容器的 CSS 宽度属性：
一些文字..
一些文字..
一些文字..
一些文字..
示例
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')" class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
手风琴内容
手风琴与链接：
示例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>
手风琴作为列表：
- 吉尔
- 前夕
- 亚当
示例
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
侧边栏内的手风琴（稍后您将了解有关侧边栏的更多信息）：
示例
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
动画手风琴
使用任何 w3-animate-类淡入淡出、缩放或滑动手风琴内容：