W3.CSS 手風琴

點選下面的“開啟部分”按鈕檢視手風琴的工作原理

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

連結 1 連結 2 連結 3

帶圖片的摺疊面板

法國阿爾卑斯山

手風琴

手風琴用於顯示（和隱藏）HTML 內容。

使用 w3-hide 類隱藏手風琴內容。

使用任意按鈕開啟和關閉內容

示例

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
開啟第一部分</button>

<div id="Demo1" class="w3-container w3-hide">
<p>一些文字..</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% 寬	內容為 160px 寬（預設）
常用於開啟多個部分	常用於開啟一個部分

手風琴

連結 1 連結 2 連結 3

下拉選單

手風琴按鈕

您可以使用任何 HTML 元素來開啟手風琴內容。我們更喜歡帶 w3-block 類的按鈕，以使其跨越整個頁面寬度（100% 寬度）。

請記住，W3.CSS 中的按鈕預設居中。如果您想將它們左對齊，請使用 w3-left-align 類。但是，您不必遵循我們的方法——手風琴無論如何都會看起來不錯

Lorem ipsum...

內容也居中！

示例

<button onclick="myFunc('Demo1')" class="w3-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">
左對齊並全寬</button>

<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
居中並全寬</button>

<div id="Demo3" class="w3-hide w3-center">
<p>內容也居中！</p>
</div>

自己動手試一試 »

活動手風琴按鈕

使用 JavaScript 突出顯示已開啟（已單擊）的手風琴

一些文字..

其他一些文字..

示例

// 將 w3-red 類新增到所有已開啟的手風琴
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", "");
}

自己動手試一試 »