Давайте создадим аккордеон фактов, используя HTML, CSS и ванильный Javascript.

Сначала мы создадим HTML-скелет аккордеона. Будет 4 карты фактов. Таким образом, HTML-код будет выглядеть следующим образом:

    <div class="container">
      <h2 class="accordion-title">Facts About Mars!</h2>
      <div class="faq-container grid">

        <div class="faq-item">
          <header class="faq-header">
            <i class="ri-add-line"></i>
            <h4 class="faq-header-title">Also known as the Red Planet</h4>
          </header>
          <div class="faq-desp">
            <p class="faq-desp-content">
              This is because Mars is covered in soil, rock, and dust made from
              iron oxide which gives the surface a red rusty colour
            </p>
          </div>
        </div>

     </div>
    </div>

Войти в полноэкранный режим

Выйти из полноэкранного режима

Будет еще 3 карты фактов [div with a class of faq-item] внутри [div with a class of faq-container]. Мы будем использовать сетку CSS для структурирования карточек фактов:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

Наша цель — показать/скрыть описание карточки «Факты». [div tag with a class of faq-desp] нажав на заголовок карты [header tag with a class of faq-header]

Во-первых, мы скроем описание карточки «Факты», используя свойство CSS height: 0px и overflow: hidden, как показано ниже:
.faq-desp {
overflow: hidden;
height: 0px;
}

Теперь самое интересное — переключить (показать/скрыть) описание с помощью Javascript. Фрагмент кода ниже:

const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach((faq) => {
  const faqHeader = faq.querySelector(".faq-header");

  faqHeader.addEventListener("click", () => {
    const openFaq = document.querySelector(".faq-open");

    toogleFaq(faq);

    if (openFaq && openFaq !== faq) {
      toogleFaq(openFaq);
    }
  });
});

const toogleFaq = (faq) => {
  const faqDescription = faq.querySelector(".faq-desp");

  if (faq.classList.contains("faq-open")) {
    faqDescription.removeAttribute("style");
    faq.classList.remove("faq-open");
  } else {
    faqDescription.style.height = faqDescription.scrollHeight + "px";
    faq.classList.add("faq-open");
  }
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Шаги к достижению цели:

  1. Выберите все карточки с фактами, используя querySelectorAll
  2. Прокрутите каждую карту, используя forEach, и выберите заголовок карты.
  3. Добавьте прослушиватель событий щелчка в заголовок и вызовите функцию переключения (она показывает/скрывает описание карты фактов) с картой в качестве аргумента в функции обратного вызова прослушивателя событий.
  4. Функция переключения выбирает описание карты и добавляет встроенный стиль высоты, равный scrollHeight. [The scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins]
  5. Мы достигли нашей цели. Остальные я добавил дополнительные стили, чтобы аккордеон выглядел презентабельно.

Пожалуйста, найдите полный код в codeandbox здесь: Кодовая песочница