带文本按钮innerHTML的手风琴

基础概念

手风琴（Accordion）是一种常见的用户界面组件，它允许用户通过点击不同的部分来展开或折叠内容区域。带文本按钮的innerHTML手风琴是指使用HTML的innerHTML属性来动态设置按钮的文本内容，并通过JavaScript来控制手风琴的展开和折叠。

类型

单页手风琴：所有内容都在同一个页面上，通过展开和折叠来显示不同的部分。
多页手风琴：每个部分可以链接到不同的页面。

应用场景

导航菜单：用于网站的导航菜单，用户可以通过点击不同的菜单项来展开或折叠子菜单。
信息展示：用于展示详细信息，用户可以根据需要展开或折叠不同的内容部分。
设置页面：用于配置页面，用户可以通过展开和折叠不同的设置选项来查看和修改配置。

示例代码

以下是一个简单的带文本按钮innerHTML的手风琴示例：

<!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: 400px;
            margin: 50px auto;
        }
        .accordion-item {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .accordion-header {
            background-color: #f1f1f1;
            padding: 10px;
            cursor: pointer;
        }
        .accordion-content {
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span id="accordion-title-1">Section 1</span>
            </div>
            <div class="accordion-content">
                <p>Content for section 1.</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span id="accordion-title-2">Section 2</span>
            </div>
            <div class="accordion-content">
                <p>Content for section 2.</p>
            </div>
        </div>
    </div>

    <script>
        function toggleAccordion(header) {
            const content = header.nextElementSibling;
            if (content.style.display === "none") {
                content.style.display = "block";
                header.innerHTML = header.innerHTML.replace("Section", "Collapse");
            } else {
                content.style.display = "none";
                header.innerHTML = header.innerHTML.replace("Collapse", "Section");
            }
        }
    </script>
</body>
</html>