如何为div组件实现「显示更多/收起」按钮？（非纯文本场景）

开发者阿泽

2026-7-26

实现乐器落地页的「显示更多/收起」按钮（针对完整Div组件）

核心思路

将需要折叠的小提琴、大提琴组件统一包裹在一个容器内，默认设置为隐藏状态；通过按钮触发JavaScript事件，切换容器的显示/隐藏状态，同时更新按钮文本。

修改后的完整代码

1. HTML 结构调整

在键盘组件后添加切换按钮，并将小提琴、大提琴组件放入统一容器：

<section id="product-info" class="product-info">
    <b>Here are the instruments that our brand serves: </b>
    <div class="guitar">
        <div id="guitarbox">
            <div id="guitarcontent">
                <h1>Guitar</h1><hr>
                <p>
                    An electric guitar is a guitar that requires 
                    external amplification in order to be heard at 
                    typical performance volumes, unlike a standard 
                    acoustic guitar. It uses one or more pickups to 
                    convert the vibration of its strings into 
                    electrical signals, which ultimately are 
                    reproduced as sound by loudspeakers.
                </p>
            </div>
            <div id="guitarimg">
                <a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank">
                    <img src="/images/electric-guitar.jpg" width="500px">
                </a>
            </div>
        </div>
    </div>
    <div class="keyboard">
        <div id="keyboardbox">
            <div id="keyboardcontent">
                <h1>Keyboard</h1><hr>
                <p>
                    A musical keyboard is the set of adjacent depressible 
                    levers or keys on a musical instrument. 
                    Keyboards typically contain keys for playing the 
                    twelve notes of the Western musical scale, with a 
                    combination of larger, longer keys and smaller, 
                    shorter keys that repeats at the interval of an octave.
                </p>
            </div>
            <div id="keyboardimg">
                <a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
                    <img src="/images/keyboard2.png" width="500px">
                </a>
            </div>
        </div>
    </div>
    <!-- 添加切换按钮 -->
    <button id="toggleBtn" class="toggle-btn">显示更多乐器</button>
    <!-- 包裹需要折叠的组件 -->
    <div class="hidden-instruments">
        <div class="violin">
            <div id="violinbox">
                <div id="violincontent">
                    <h1>Violin</h1><hr>
                    <p>
                        The violin, sometimes known as a fiddle, is a 
                        wooden chordophone (string instrument) in the 
                        violin family. Most violins have a hollow wooden 
                        body. It is the smallest and thus highest-pitched 
                        instrument (soprano) in the family in regular use.
                    </p>
                </div>
                <div id="violinimg">
                    <a href="https://en.wikipedia.org/wiki/Violin" target="_blank">
                        <img src="/images/violin.jpg" width="500px">
                    </a>
                </div>
            </div>
        </div>
        <div class="cello">
            <div id="cellobox">
                <div id="cellocontent">
                    <h1>Cello</h1><hr>
                    <p>
                        The cello (/ˈtʃɛloʊ/ CHEL-oh; plural celli or 
                        cellos) or violoncello (/ˌvaɪələnˈtʃɛloʊ/ VY-ə-lən-CHEL-oh; 
                        Italian pronunciation: [vjolonˈtʃɛllo]) is a 
                        bowed (sometimes plucked and occasionally hit) 
                        string instrument of the violin family.
                    </p>
                </div>
                <div id="celloimg">
                    <a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
                        <img src="/images/cello2.jpeg" width="500px">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

2. CSS 样式补充

添加按钮样式及容器默认隐藏规则：

#product-info {
  margin-top: 10px;
    font-family: 'Cinzel', serif;
    background: linear-gradient(0deg, 
    rgba(123,67,151,1) 0%, 
    rgba(220,36,48,1) 100%);
    align-items: center;
    padding-top: 100px;
    min-height: 100vh; /* 替换固定height为min-height，避免内容溢出问题 */
}

/* 按钮样式 */
.toggle-btn {
    display: block;
    margin: 20px auto;
    padding: 12px 30px;
    border: none;
    border-radius: 20px;
    background-color: rgb(237, 244, 199);
    font-family: 'Cinzel', serif;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-btn:hover {
    background-color: #bebebe;
}

/* 默认隐藏乐器容器 */
.hidden-instruments {
    display: none;
}

/* FOR GUITAR */
#guitarbox {
  display: flex;
  float: right;
  justify-content: center;
  margin: 40px;
  border-radius: 20px;
  background-color: rgb(237, 244, 199);
  transition: 1s;
  border-radius: 20px;
}

#guitarbox:hover {
  background-color: #bebebe;
}

#guitarcontent {
  margin: 30px;
  padding-top: 20px;
}

#guitarbox img {
  border-radius: 0px 20px 20px 0px;
}
/* GUITAR END */
  
/* FOR KEYBOARD */
#keyboardbox {
  display: flex;
  float: right;
  justify-content: center;
  margin: 40px;
  border-radius: 20px;
  background-color: rgb(237, 244, 199);
  transition: 1s;
  border-radius: 20px;
}

#keyboardcontent {
  margin: 30px;
  padding-top: 20px;
}

#keyboardbox:hover {
  background-color: #bebebe;
}

#keyboardbox img {
  border-radius: 0px 20px 20px 0px;
}
/* KEYBOARD END */

/* FOR VIOLIN */
#violinbox {
  display: flex;
  float: right;
  justify-content: center;
  margin: 40px;
  border-radius: 20px;
  background-color: rgb(237, 244, 199);
  transition: 1s;
  border-radius: 20px;
}

#violinbox:hover {
  background-color: #bebebe;
}

#violincontent {
  margin: 30px;
  padding-top: 20px;
}

#violinbox img {
  margin-right: 0;
  border-radius: 0px 20px 20px 0px;
}
/* VIOLIN END */
  
/* FOR CELLO */
#cellobox {
  display: flex;
  float: right;
  justify-content: center;
  margin: 40px;
  border-radius: 20px;
  background-color: rgb(237, 244, 199);
  transition: 1s;
  border-radius: 20px;
}

#cellobox:hover {
  background-color: #bebebe;
}

#cellocontent {
  margin: 30px;
  padding-top: 20px;
}

#cellobox img {
  border-radius: 0px 20px 20px 0px;
}
/* CELLO END */

3. JavaScript 交互逻辑

实现按钮点击切换显示状态及文本：

// 获取按钮和需要切换的容器
const toggleBtn = document.getElementById('toggleBtn');
const hiddenInstruments = document.querySelector('.hidden-instruments');

// 添加点击事件监听
toggleBtn.addEventListener('click', () => {
    // 切换容器的显示状态
    const isHidden = hiddenInstruments.style.display === 'none' || hiddenInstruments.style.display === '';
    hiddenInstruments.style.display = isHidden ? 'block' : 'none';
    
    // 更新按钮文本
    toggleBtn.textContent = isHidden ? '收起乐器' : '显示更多乐器';
});

效果说明

页面加载时，小提琴、大提琴组件默认隐藏，仅显示吉他和键盘
点击「显示更多乐器」按钮，展开小提琴、大提琴组件，按钮文本变为「收起乐器」
再次点击按钮，隐藏小提琴、大提琴组件，按钮文本恢复为「显示更多乐器」
保留了原有的组件hover样式和布局风格，确保视觉一致性

内容的提问来源于stack exchange，提问作者user17746897