JQ和CSS3的手風琴效果都可以通過定義伸縮盒子來實現。其中JQ比較簡單，只需要添加一個click事件即可。

$(document).ready(function(){
$('.accordion-item-title').click(function(){
$('.accordion-item-content').slideUp();
$(this).siblings('.accordion-item-content').slideDown();
});
})

其中，.accordion-item-title及.accordion-item-content為手風琴的標題和內容區域。點擊標題，就可以顯示相應的內容。CSS3的實現則有些不同，需要使用:hover及:checked偽類。

.accordion {
display: flex;
flex-direction: column;
overflow: hidden;
}
input[type="radio"] {
display: none;
}
.accordion-item {
margin: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.accordion-item-header {
display: flex;
justify-content: space-between;
padding: 10px;
cursor: pointer;
user-select: none;
background-color: #ddd;
transition: background-color 0.25s ease-in-out;
}
.accordion-item-header:hover {
background-color: #ccc;
}
.accordion-item-content {
padding: 10px;
background-color: #eee;
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease-in-out;
}
input[type="radio"]:checked + .accordion-item .accordion-item-content {
max-height: 100vh;
}

其中，.accordion為手風琴整體的樣式，.accordion-item為每個手風琴的單獨區域，.accordion-item-header為手風琴標題，.accordion-item-content為手風琴內容區域。

通過點擊手風琴標題或者鼠標懸停在標題上，就可以展開相應的內容。同時，使用:checked偽類可以默認打開某個手風琴。