Создание аккордеона с помощью ванильного Javascript

Давайте создадим аккордеон фактов с помощью 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>

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

Внутри [div с классом faq-item] будет еще 3 карточки фактов [div с классом faq-container]. Для структурирования карточек фактов мы будем использовать CSS-сетку:

Наша цель — показать/скрыть описание карточки фактов [тег div с классом faq-desp], нажав на заголовок карточки [тег header с классом faq-header].

Сначала мы скроем описание карточки «Факты» с помощью CSS-свойства height: 0px и overflow: hidden, как показано ниже:

Теперь самое интересное — переключить (показать/скрыть) описание с помощью 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. Добавьте слушатель события click на заголовке и вызовите функцию toggle (она показывает/скрывает описание карточки факта) с карточкой в качестве аргумента в функции обратного вызова слушателя события.
  4. Функция переключения выбирает описание карточки и добавляет инлайн-стиль с высотой, равной scrollHeight. [Свойство scrollHeight возвращает высоту элемента с учетом подкладок, но без учета границ, полос прокрутки или полей].
  5. Мы достигли нашей цели. Отдохнув, я добавил дополнительные стили, чтобы придать аккордеону презентабельный вид.

Пожалуйста, найдите полный код в codesandbox здесь: Code Sandbox

Оцените статью
devanswers.ru
Добавить комментарий