如何在 CSS 中切换活动状态元素？

Question

目标是使用无序列表，其中相对位置的每个下拉列表都包含一个段落。我有伪代码 :active 正常工作，但想知道是否可以切换此下拉菜单。 jQuery 解决方案最适合这个问题吗？我应该改用按钮吗？

我期待每个块在相对位置点击时下拉。此选项是可切换的。

.btn {
  display: inline-flex;
  padding: 0;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-size: 16px;
  cursor: pointer;
  background-color: #697180;
  font-family: 'Quicksand', sans-serif;
  margin-top: 10px;
  transition: all 1s;
}

.btn:hover {
  color: #e9eff8;
}

.coach_name,
.coach_school {
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.coach_school {
  background: rgba(0, 0, 0, 0.08);
}

.coaches_bar ul {
  list-style: none;
  display: block;
  padding: 10px;
}

.coaches_bar ul li {
  margin-top: 10px;
}

.coaches_info {
  display: none;
}

.coaches_bar ul li:active .coaches_info {
  display: block;
  position: relative;
  color: var(--color-white);
  margin-top: 10px;
}

.coaches_info ul {
  display: block;
}

<div class="coaches_bar">
  <ul>
    <li>
      <a class="btn">
        <span class="coach_name">Cody Ferriero</span>
        <span class="coach_school">Northeastern '14 Governors Academy '04</span
            >
          </a>
          <div class="coaches_info">
            <ul>
                <li><p>Cody is a NEFPHL and Top Gun alumni. Cody played prep school hockey at Governor’s Academy. He went on to be a Division 1 scholarship hockey player at Northeastern University where he was given the Most Exciting Player Award in (2012-13). He was drafted 127th in the 2010 NHL Entry Draft by the San Jose Sharks. He played 2 years in the ECHL with the Rapid City Rush and the Utah Grizzlies. Cody is a CFSC (Certified Functional Strength Coach).</p></li>
            </ul>
        </li>
        <li>
            <a class="btn">
              <span class="coach_name">Cody Ferriero</span>
        <span class="coach_school">Northeastern '14 Governors Academy '04</span
              >
            </a>
            <div class="coaches_info">
              <ul>
                  <li><p>Cody is a NEFPHL and Top Gun alumni. Cody played prep school hockey at Governor’s Academy. He went on to be a Division 1 scholarship hockey player at Northeastern University where he was given the Most Exciting Player Award in (2012-13). He was drafted 127th in the 2010 NHL Entry Draft by the San Jose Sharks. He played 2 years in the ECHL with the Rapid City Rush and the Utah Grizzlies. Cody is a CFSC (Certified Functional Strength Coach).</p></li>
              </ul>
          </li>
        
      </ul>
    </div>