CSS 制作内容折叠面板

实现思路：面板默认为折叠状态，点击面板展开内容，再次点击收缩面板。使用 <input> 和 <label> 来制作内容区域，模拟点击事件，并使用伪类选择器 :checked 模拟点击状态，选中则展开内容，反之则收缩内容。

<div class="accordion">
  <input type="checkbox" class="accordion__input" id="accordion--1" />
  <label for="accordion--1" class="accordion__label">
    <p class="accordion__label--number">01</p>
    <p class="accordion__label--text">Click to expand the content.</p>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="accordion__label--icon"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
    </svg>

    <div class="accordion__label--content">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium
        dolor at sequi obcaecati cupiditate. Voluptates repellendus cupiditate
        aperiam! Incidunt amet quo neque.
      </p>
      <ul>
        <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
        <li> Quasi accusamus corporis totam tempora suscipit ab obcaecati. </li>
        <li>Tempora, et atque officia at consequatur laborum!</li>
        <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
      </ul>
    </div>
  </label>
</div>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #343a40;
}

.accordion {
  width: 700px;
  margin: 40px auto;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.accordion__input {
  opacity: 0;
  visibility: hidden;
}

.accordion__label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 0 24px;
}

.accordion__label--content {
  grid-column: 2 / 3;
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.5s;
}

.accordion__label--content p {
  margin-bottom: 24px;
  line-height: 1.7;
}

.accordion__label--content ul {
  margin-left: 20px;
  color: #868e96;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion__input:checked ~ .accordion__label .accordion__label--content {
  height: 270px;
  opacity: 1;
  visibility: visible;
  padding-bottom: 10px 0;
}

.accordion__label--number,
.accordion__label--text {
  font-size: 24px;
  font-weight: 500;
}

.accordion__label--icon {
  width: 24px;
  height: 24px;
  stroke: #087f5b;
}

.accordion__label--number {
  color: #ced4da;
}