在网页设计中，手风琴（Accordion）是一种常见的交互元素，用于节省页面空间同时展示大量信息。本文将指导你如何通过 HTML 和 CSS 创建一个基本的手风琴组件。

### CSS 样式设置
首先，我们需要定义一些基本的 CSS 样式来控制手风琴的外观和行为：
```css
.acc-container {
width: 100%;
margin: 30px auto 0;
overflow: hidden;
border: 1px solid #000;
}
.acc-btn {
width: 100%;
margin: 0 auto;
padding: 20px 25px;
cursor: pointer;
background-color: #e6e6e6;
text-align: left;
}
.acc-content {
height: 0;
width: 100%;
margin: 0 auto;
overflow: hidden;
transition: height 0.3s ease;
}
.acc-content-inner {
padding: 30px;
}
.open {
height: auto;
}
h1 {
font: 700 20px/26px 'Lato', sans-serif;
color: #798795;
}
p {
font: 400 16px/24px 'Lato', sans-serif;
color: #798795;
}
.acc-btn h1.selected {
margin-bottom: 0 !important;
}
.selected {
color: #798795;
}
h1 .indicator:before {
content: '+';
font-size: 20px;
margin-right: 15px;
}
h1.selected .indicator:before {
content: '-';
font-size: 20px;
margin-right: 15px;
}
```

### Javascript 动态控制
为了使手风琴能够动态展开和收起，我们需要添加一些 Javascript 代码来处理点击事件：
```Javascript
(function ($) {
$(document).ready(function () {
var animTime = 300,
clickPolice = false;
$('.acc-btn').on('click', function () {
if (!clickPolice) {
clickPolice = true;
var currIndex = $(this).index('.acc-btn'),
targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
$('.acc-btn h1').removeClass('selected');
$(this).find('h1').addClass('selected');
$('.acc-content').stop().animate({ height: 0 }, animTime);
$('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
setTimeout(function () { clickPolice = false; }, animTime);
}
});
});
})(jQuery);
```

### HTML 结构
最后，我们需要构建手风琴的基本 HTML 结构：
```html

```

以上就是创建一个简单的手风琴组件的完整步骤。你可以根据实际需要调整样式和功能，以适应不同的应用场景。