如何实现按钮点击保持展开状态，再次点击恢复默认？

当前你的按钮需要按住才能展开隐藏内容，要改成点击保持展开、再次点击收起的效果，推荐两种实现方式，纯CSS方案无需JavaScript，兼容性更好：

方案一：纯CSS实现（利用复选框） #

1. 修改HTML代码 #

添加一个隐藏的复选框，和原有的箭头标签关联，点击箭头即可切换复选框状态：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>TITLE</title>
    </head>

<body>
    <div class="mainPic">
        <section>
            <header style="text-align: center;">
                <h1>TITLE & info</h1>
            </header>

            <!-- 新增隐藏复选框，用于控制展开状态 -->
            <input type="checkbox" id="trigger" style="display: none;">
            <div id="hidden-content">
                <label class="bottom-arrow" for="trigger"></label>
                <div id="list">
                    <div>hidden text</div>
                    <div>hidden text</div>
                    <div>hidden text</div>
                    <div>hidden text</div>
                    <div>hidden text</div>
                    <div>hidden text</div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

2. 修改CSS代码 #

将原有的:active状态替换为复选框选中时的样式，利用兄弟选择器触发展开/收起：

@charset "utf-8";

body{
    background-color: white;
}

.mainPic{
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid black;
}

h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;
    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}

.bottom-arrow{
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
    bottom: 10px; /* 设置初始位置 */
    transition: bottom 0.25s ease-out; /* 添加入场过渡 */
}

section{position:relative;}

#hidden-content #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

/* 复选框选中时，展开隐藏列表 */
#trigger:checked ~ #hidden-content #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

/* 复选框选中时，调整箭头位置 */
#trigger:checked ~ #hidden-content .bottom-arrow{
    bottom: -25px;
}

方案二：JavaScript实现（类名切换） #

如果更倾向于用JS控制状态，可采用类名切换的方式：

1. 修改HTML代码 #

给箭头添加点击事件：

<div id="hidden-content">
    <div class="bottom-arrow" onclick="toggleContent()"></div>
    <div id="list">
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
    </div>
</div>

2. 修改CSS代码 #

新增.expanded类用于控制展开状态：

/* 保留原有CSS，替换原:active相关样式为以下内容 */
#hidden-content.expanded #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

#hidden-content.expanded .bottom-arrow{
    bottom: -25px;
}

3. 添加JavaScript代码 #

在HTML的<body>末尾添加脚本：

function toggleContent() {
    const content = document.getElementById('hidden-content');
    content.classList.toggle('expanded');
}

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