如何将HTML/CSS/原生JS实现的折叠面板按钮调整为并排显示

实现起来不需要修改现有JS逻辑，仅调整HTML结构和CSS样式即可，操作如下：

核心修改思路 #

• 给所有折叠模块套一个父容器，使用Flex布局实现子元素水平排列
• 调整边距和宽度规则，避免展开内容时布局错位
• 增加自适应规则，小屏幕下自动折行避免溢出

修改后的完整代码 #

HTML #

<section class = "Title">
    <p> Title of Example</p>
    <!-- 新增父容器包裹所有折叠模块 -->
    <div class="collapse-wrapper">
        <div class = "collapse">
            <button class = "collapse__button"> Example 1 </button> 
                <div class="collapse__content">
                    <p>
                        writing
                    </p>
                </div>
        </div>
        
        <div class = "collapse">
            <button class = "collapse__button"> Example 2 </button> 
                <div class="collapse__content">
                    <p>
                        more writing
                    </p>
                </div>
        </div>
    </div>
</section>

CSS #

/* 新增父容器样式 */
.collapse-wrapper {
    display: flex;
    justify-content: center;
    gap: 3em; /* 控制两个折叠模块之间的间距 */
    flex-wrap: wrap; /* 小屏幕自动折行 */
}
/* 给每个折叠模块固定宽度，避免展开内容时布局变形 */
.collapse {
    width: 200px;
}
.collapse__button {
    padding: 1em 2em ;
    background: var(--clr-dark);
    color: var(--clr-light);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    width: 100%; /* 按钮撑满折叠模块宽度 */
    margin: 2em 0; /* 去掉原有的左右margin，用父容器gap控制间距 */
    border: 8px var(--clr-accent);
    border-radius: 20px;
}
.collapse__button:hover{
    transform: scale(1.1);
    background: var(--clr-accent);
}
.collapse__button::after{
    content: "\25be";
    float: right;
    transform: scale(1);
}
.collapse__content{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s;
    padding: 0 15px;
}
.collapse__button--active::after{
    content: "\25b4";
}
.Title{
    text-align: center;
}

JavaScript（无需修改，可直接沿用） #

document.querySelectorAll(".collapse__button").forEach(button =>{
    button.addEventListener("click", () =>{
        const collapseContent = button.nextElementSibling;
        button.classList.toggle("collapse__button--active");
        if (button.classList.contains("collapse__button--active")){
            collapseContent.style.maxHeight = collapseContent.scrollHeight + "px";
        }else{
            collapseContent.style.maxHeight = 0;
        }
    });
});

如果需要调整按钮间距，直接修改.collapse-wrapper的gap值即可；如果需要调整按钮宽度，同步修改.collapse的width值就行。

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