CSSのみで
アコーディオンメニューを実装する

.p-accordion {
  max-width: 700px;
  margin-inline: auto;
}
.p-accordion-desc {
  font-size: 15px;
  font-weight: 700;
}
.p-accordion__head {
  cursor: pointer;
  background-color: #26a69a;
  display: block;
  color: white;
  padding: 7px 20px;
  margin-top: 10px;
}
.p-accordion__head-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-accordion__icon {
  display: block;
  position: relative;
  width: 24px;
  transition: transform 0.25s;
}
.p-accordion__icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 2px;
  background-color: #fff;
}
.p-accordion__icon:after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 2px;
  background-color: #fff;
}
.p-accordion__icon:before {
  left: 0;
  transform: rotate(45deg);
}
.p-accordion__icon:after {
  right: 0;
  transform: rotate(-45deg);
}
.p-accordion__input input[name=p-accordion__block] {
  display: none;
}
.p-accordion__input .p-accordion__block {
  cursor: pointer;
}
.p-accordion__input .p-accordion__content {
  height: 0;
  padding: 0 20px;
  overflow: hidden;
  opacity: 0.5;
  background-color: #fff;
  transition: padding 0.25s ease, opacity 0.3s ease 0s;
}
.p-accordion__input input[name=p-accordion__block]:checked + .p-accordion__head > .p-accordion__head-inner .p-accordion__icon {
  transform: rotate(-180deg);
}
.p-accordion__input input[name=p-accordion__block]:checked + .p-accordion__head + .p-accordion__content {
  /*開閉時*/
  height: auto;
  opacity: 1;
  padding: 20px;
}

<div class="p-accordion p-accordion__input">
 <div class="p-accordion-desc">●HTMLとCSSのみ</div>
   <input id="p-accordion__01" type="checkbox" name="p-accordion__block">
   <label class="p-accordion__head" for="p-accordion__01"><span class="p-accordion__head-inner">Human<span class="p-accordion__icon"></span></span></label>
   <div class="p-accordion__content">
     <div class="p-accordion__main">A place where people live. The world. The world. The world in which people live and relate to each other. It is also a word that conceptually expresses the fragile and ephemeral state of such human society.</div>
     </div>
   <input id="p-accordion__02" type="checkbox" name="p-accordion__block">
   <label class="p-accordion__head" for="p-accordion__02"><span class="p-accordion__head-inner">Gorilla<span class="p-accordion__icon"></span></span></label>
   <div class="p-accordion__content">
     <div class="p-accordion__main">An ape living in Africa. They are very large and strong. They live in small families in tree nests.</div>
     </div>
   <input id="p-accordion__03" type="checkbox" name="p-accordion__block">
   <label class="p-accordion__head" for="p-accordion__03"><span class="p-accordion__head-inner">Chimpanzee<span class="p-accordion__icon"></span></span></label>
   <div class="p-accordion__content">
     <div class="p-accordion__main">An ape living in the forests of western and central Africa. They are about 150 cm long and black all over. They form groups, mainly consisting of males. They are cheerful, vocal, and intelligent.</div>
     </div>
</div>