<div class="accordion">
          <div class="accordion__panel">
               <button class="accordion-panel__trigger">Паукообразные</button>
               <div class="accordion-panel__databox">
                    <div class="accordion-panel-databox__content">
                         <ul class="listbox">
                              <li class="listbox__item">Клещи</li>
                              <li class="listbox__item">Фрины</li>
                              <li class="listbox__item">Пауки</li>
                              <li class="listbox__item">Сенокосцы</li>
                         </ul>
                    </div>
               </div>
          </div>
          <div class="accordion__panel">
               <button class="accordion-panel__trigger">Млекопитающие</button>
               <div class="accordion-panel__databox">
                    <div class="accordion-panel-databox__content">
                         <ul class="listbox">
                              <li class="listbox__item">Кошки</li>
                              <li class="listbox__item">Киты</li>
                              <li class="listbox__item">Собаки</li>
                              <li class="listbox__item">Кентавры</li>
                              <li class="listbox__item">Виверны</li>
                              <li class="listbox__item">Драконы</li>
                              <li class="listbox__item">Единороги</li>
                         </ul>
                    </div>
               </div>
          </div>
          <div class="accordion__panel">
               <button class="accordion-panel__trigger">Птицы</button>
               <div class="accordion-panel__databox">
                    <div class="accordion-panel-databox__content">
                         <ul class="listbox">
                              <li class="listbox__item">Курицы</li>
                              <li class="listbox__item">Попугаи</li>
                              <li class="listbox__item">Птеродактили</li>
                              <li class="listbox__item">Индюки</li>
                         </ul>
                    </div>
               </div>
          </div>
     </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}


.accordion {
     width: 100%;
     height: auto;
     margin: 0 auto;
     max-width: 400px;
     display: grid;
     grid-gap: 10px;
}

.accordion-panel__trigger {
     border-radius: 5px;
     color: #333;
     padding: 15px 20px;
     width: 100%;
     font-family: "Roboto Condensed", sans-serif;
     font-size: 15px;
     transition: background 0.2s ease, color 0.2s ease;
     background: #fff;
     text-align: left;
}

.accordion-panel__trigger:hover {
        background: #4b62e1;
        color: #FFF;
}

.accordion-panel__trigger-active {
        background: #3f51b5;
        color: #FFF;
}

.accordion-panel__databox {
     overflow: hidden;
     max-height: 0;
     visibility: hidden;
     transition: visibility 0.5s ease, max-height 0.5s ease;
     transition-timing-function: ease-out;
}

.accordion-panel__databox-active {
     max-height: var(--height, 0);
     visibility: visible;
}

.accordion-panel-databox__content {
     background: #fff;
     border-radius: 5px;
     margin: 10px 0;
     padding: 15px;
}

.listbox {
     display: grid;
     grid-gap: 10px;
}

.listbox__item{
        font-family: "Roboto", sans-serif;
        font-size: 15px;
}

.listbox__item:not(:last-child) {
     border-bottom: 2px solid #eee;
     padding-bottom: 10px;
}

const Accordion = selector => {
     const accordion = document.querySelector(selector);
     const accordionButtons = accordion.querySelectorAll(".accordion-panel__trigger");
     const accordionDataboxes = accordion.querySelectorAll(".accordion-panel__databox");

     accordion.addEventListener("click", ({ target }) => {
          if (target.classList.contains("accordion-panel__trigger")) {
               const parent = target.closest(".accordion__panel");
               const currentButton = parent.querySelector(".accordion-panel__trigger");
               const currentDatabox = parent.querySelector(".accordion-panel__databox");

               accordionButtons.forEach(v => {
                    if (v !== currentButton) {
                         v.classList.remove("accordion-panel__trigger-active");
                    }
               });

               accordionDataboxes.forEach(v => {
                    if (v !== currentDatabox) {
                         v.classList.remove("accordion-panel__databox-active");
                    }
               });

               currentButton.classList.toggle("accordion-panel__trigger-active");

               currentDatabox.classList.toggle("accordion-panel__databox-active");
               currentDatabox.style.setProperty("--height", `${currentDatabox.scrollHeight}px`);
          }
     });
};

Accordion(".accordion");