如何通过css制作折叠面板

<div class="accordion">
  <input type="checkbox" id="panel1" class="accordion-toggle">
  <label for="panel1" class="accordion-title">点击展开/收起</label>
  <div class="accordion-content">
    <p>这里是折叠面板的内容，可以是任意HTML元素。</p>
  </div>
</div>

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
<p>.accordion-toggle {
display: none;
}</p><p>.accordion-title {
background-color: #f5f5f5;
padding: 15px;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid #ddd;
}</p><p>.accordion-title::before {
content: "+";
display: inline-block;
margin-right: 8px;
}</p><p>.accordion-toggle:checked + .accordion-title::before {
content: "−";
}</p><p>.accordion-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease;
}</p><p>.accordion-toggle:checked ~ .accordion-content {
max-height: 200px; /<em> 根据内容调整高度 </em>/
}</p>

<details>
  <summary>点击展开</summary>
  <p>这是内容部分。</p>
</details>