手風琴
手風琴用於顯示（或隱藏）的內容被分成段。
請點擊下面的“公開組”按鈕來看看它是如何工作的：
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
手風琴與圖片：
Trolltunga，挪威
在W3-手風琴類定義了一個手風琴，和W3-手風琴內容類定義要顯示的部分：
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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元素。
手風琴與下拉
下面的列表顯示了手風琴和下拉之間的區別：
手風琴
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
- 含量為寬100％（跨越父元素的整個寬度）
- 當打開時，它會將網頁內容了，如果有的話（位置：相對）
- 經常使用“打開”多節
手風琴按鈕
您可以使用任意的HTML元素打開手風琴的內容。 我們寧願一個按鈕與W3-BTN-block類，因為它跨越其父元素的整個寬度，就像手風琴含量（寬度為100％）。 請記住，在W3.CSS按鈕默認情況下居中。 如果你想他們左對齊，而不是使用W3-左對齊類。 但是，您不必按照我們的方法 - 手風琴會好看兩種方式：
Lorem存有...
Lorem存有...
中心的內容，以及！
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</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％。 要覆蓋這一點，W3-Accordion容器的CSS width屬性更改：
一些文字..
一些文字..
一些文字..
一些文字..
例
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>手風琴內容
手風琴的鏈接：
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>手風琴與列表的卡：
- 吉爾
- 前夕
- 亞當
例
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>內Sidenav手風琴（注：您將了解更多關於側導航版本）：
例
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>手風琴動畫
使用任何W3-animate- 類褪色，縮放或幻燈片手風琴內容：