W3 CSS是一種CSS框架，可以幫助開發人員設計和構建具有現代外觀和功能的網站。其中一個功能就是手風琴。

// HTML
<div class="w3-accordion">
<button class="w3-button">Section 1</button>
<div class="w3-panel">
<p>Content for section 1.</p>
</div>
<button class="w3-button">Section 2</button>
<div class="w3-panel">
<p>Content for section 2.</p>
</div>
</div>
// CSS
.w3-accordion {
width: 100%;
max-width: 600px;
margin: auto;
}
.w3-button {
width: 100%;
text-align: left;
border: none;
outline: none;
background-color: #eee;
color: #444;
cursor: pointer;
transition: background-color 0.3s;
padding: 18px;
font-size: 16px;
}
.w3-button:hover {
background-color: #ccc;
}
.w3-panel {
padding: 0 18px;
overflow: hidden;
background-color: white;
font-size: 16px;
}
.w3-show {
display: block;
}

在HTML中，我們使用div標簽來創建手風琴，其中包含一個按鈕和對應的面板。按鈕和面板需要具有對應的類名。在CSS中，我們可以對按鈕和面板使用樣式。如果要顯示面板，則需要在面板的類名中添加"w3-show"類名。

這樣使用W3 CSS創建手風琴非常簡單，而且它可以非常方便地自適應不同的屏幕大小。在開發現代網站時，使用W3 CSS是一個很棒的選擇。