Создайте красивый аккордеон для сайта с помощью HTML и CSS

В этом уроке мы узнаем, как создать аккордеон с помощью HTML и CSS. К концу этого урока вы будете иметь хорошее представление о том, как работают аккордеоны, и сможете включать их в свои собственные веб-проекты.

Аккордеоны - отличный способ организовать и отобразить контент на веб-странице компактным и удобным для пользователя способом.

Создайте красивый аккордеон для сайта с помощью HTML и CSS

СКАЧАТЬ

Чему вы научитесь

Как структурировать HTML-элементы для создания аккордеона.
Применение стилей CSS для настройки внешнего вида аккордеона.
Использование CSS-переходов и анимации для создания плавных анимаций аккордеона.
Улучшите аккордеон с помощью дополнительных функций, таких как иконки и эффекты наведения.

К концу этого урока у вас будет полностью функциональный аккордеон, который вы сможете настраивать и интегрировать в свои собственные веб-проекты.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure CSS Accordion</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="accordion">
      <!-- Item 1 -->
      <div class="accordion-item">
        <input type="checkbox" id="item-1" />
        <label for="item-1" class="accordion-header">
          <span>Accordion Item 1</span>
          <span class="arrow">
            <i class="fa-solid fa-caret-right"></i>
          </span>
        </label>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
            nostrum omnis, cumque laborum tempora quia earum animi nulla soluta,
            reiciendis non placeat dolorum hic temporibus odit voluptatum et nam
            nesciunt.
          </p>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="accordion-item">
        <input type="checkbox" id="item-2" />
        <label for="item-2" class="accordion-header">
          <span>Accordion Item 2</span>
          <span class="arrow">
            <i class="fa-solid fa-caret-right"></i>
          </span>
        </label>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
            nostrum omnis, cumque laborum tempora quia earum animi nulla soluta,
            reiciendis non placeat dolorum hic temporibus odit voluptatum et nam
            nesciunt.
          </p>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="accordion-item">
        <input type="checkbox" id="item-3" />
        <label for="item-3" class="accordion-header">
          <span>Accordion Item 3</span>
          <span class="arrow">
            <i class="fa-solid fa-caret-right"></i>
          </span>
        </label>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
            nostrum omnis, cumque laborum tempora quia earum animi nulla soluta,
            reiciendis non placeat dolorum hic temporibus odit voluptatum et nam
            nesciunt.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS КОД:


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #0083e9;
}
.accordion {
  width: min(90vw, 500px);
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
input[type="checkbox"] {
  display: none;
  appearance: none;
}
.accordion-item {
  padding: 1em;
  background-color: #ffffff;
  border-radius: 0.5em;
}
.accordion-item:not(:last-child) {
  margin-bottom: 1em;
}
.accordion-content {
  color: #606060;
  font-size: 0.8em;
  line-height: 1.8em;
}
label {
  font-size: 1em;
  display: flex;
  justify-content: space-between;
  color: #000000;
  cursor: pointer;
  font-weight: 500;
  padding: 1em 0;
}
input[type="checkbox"] ~ label .arrow {
  display: inline-block;
  transition: 1s;
}

input[type="checkbox"]:checked ~ label .arrow {
  transform: rotate(90deg);
}
input[type="checkbox"]:checked ~ label {
  color: #0083e9;
}
input[type="checkbox"] ~ .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: 1s;
}
input[type="checkbox"]:checked ~ .accordion-content {
  max-height: 100vh;

  transition: 1s;
}