js手风琴效果

手风琴效果（Accordion Effect）是一种常见的网页设计交互效果，通常用于在有限的空间内展示和隐藏内容，从而节省页面空间并提高用户体验。手风琴效果常见于导航菜单、信息面板等场景。

基础概念

手风琴效果通过点击某个元素（如按钮或链接）来展开或折叠其相邻的内容区域。每次只能展开一个内容区域，其他内容区域会自动折叠。

类型

水平手风琴：内容区域在水平方向展开和折叠。
垂直手风琴：内容区域在垂直方向展开和折叠，这是最常见的类型。

应用场景

导航菜单：在移动端或响应式设计中，通过手风琴效果来展示子菜单。
信息面板：在展示大量信息时，通过手风琴效果来分步骤展示内容。
FAQ页面：常见问题解答页面，通过手风琴效果来展示问题和答案。

实现示例

以下是一个简单的垂直手风琴效果的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Example</title>
    <style>
        .accordion {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        .accordion-item {
            border-bottom: 1px solid #ccc;
        }
        .accordion-header {
            background-color: #f1f1f1;
            padding: 15px;
            cursor: pointer;
            user-select: none;
        }
        .accordion-content {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
        .accordion-content.active {
            max-height: 500px; /* Adjust as needed */
            transition: max-height 0.4s ease-in;
        }
    </style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header">Section 1</div>
            <div class="accordion-content">
                <p>Content for section 1...</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">Section 2</div>
            <div class="accordion-content">
                <p>Content for section 2...</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header">Section 3</div>
            <div class="accordion-content">
                <p>Content for section 3...</p>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.accordion-header').forEach(header => {
            header.addEventListener('click', () => {
                const content = header.nextElementSibling;
                content.classList.toggle('active');
                // Close other active contents
                document.querySelectorAll('.accordion-content.active').forEach(item => {
                    if (item !== content) {
                        item.classList.remove('active');
                    }
                });
            });
        });
    </script>
</body>
</html>