玩转网页交互：用JavaScript打造灵动手风琴特效

一、手风琴特效：网页中的魔法折叠术

想象一下你在音乐厅看到的手风琴演奏——轻轻一拉，风箱便如波浪般起伏展开。在网页世界中，手风琴特效正是这种优雅互动的数字化身！当用户点击某个标题时，对应的内容就像被施了魔法般缓缓展开，其他内容则默契地折叠收起。这种设计不仅节省空间，更能让用户像探索藏宝图一样，逐步揭开内容的奥秘。

在电商网站的商品详情页，在知识平台的问答专区，甚至在个人作品集网站，手风琴特效都扮演着重要角色。它像一位聪明的管家，把杂乱的信息分门别类地整理好，需要时才为你呈现。接下来我们将从零开始，用HTML、CSS和JavaScript三剑客，亲手打造这个充满魅力的交互效果。

---

二、搭建基础骨架：HTML结构设计

<div class="accordion-container">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>第一章：魔法世界的入口h3>
      <span class="arrow">▼span>
    div>
    <div class="accordion-content">
      <p>古老的橡树在月光下低语，树根缠绕的石门缓缓打开...p>
    div>
  div>
  
div>

我们的魔法城堡需要稳固的地基。这里用accordion-container作为整个组件的容器，每个accordion-item代表一个可折叠项。头部(header)包含标题和指示箭头，内容区(content)初始处于隐藏状态。注意语义化的类名就像魔法咒语的正确发音，能让后续的CSS和JavaScript施展更顺畅。

---

三、绘制魔法外衣：CSS样式设计

.accordion-item {
   
  bord