• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать простой аккордеон на HTML и CSS (Как создать вертикальный аккордеон для сайта)
Создать простой аккордеон на HTML и CSS
Kosten
Дата: Среда, 2019-06-19, 01:18 | Сообщение 1
Администраторы
Сообщений:23565
Награды: 56


Давайте рассмотрим создание простого аккордеон на HTML и CSS3, который отлично работает при открытие и закрытие категорий. Здесь изначально идет 3 раздела, где можно добавлять, также удалять, и не нужно подключать библиотеку, все на скрипте отлично выводит, как на большом мониторе, так и на мобильном аппарате.

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



Установка:

HTML

Код
  <div class="gutedam-kolesab">
<button class="debumolaskus">ZorNet.Ru — сайт для вебмастера</button>
    <div class="kidetacan-ulogopad">
      <p>
Попадание в руки Fortbyte 59 займет немного работы.
      </p>
      <p>
В этом руководстве мы рассмотрим все, что вам нужно знать Season 9.
      </p>
    </div>

    <button class="debumolaskus">
Адаптивное модальное окно</button>
    <div class="kidetacan-ulogopad">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>

    <button class="debumolaskus">
Табы в виде аккордеона на CSS</button>
    <div class="kidetacan-ulogopad">
      <p>
      Попадание в руки Fortbyte 59 займет немного работы.
      </p>
    </div>
  </div>

CSS

Код
.gutedam-kolesab {
  width: 72%;
  max-width: 576px;
  margin: 17px auto;
}

button.debumolaskus {
  width: 100%;
  background-color: whitesmoke;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.debumolaskus:after {
  content: '\f055';
  font-family: "fontawesome";
  font-size: 14px;
  float: right;
    
}

button.debumolaskus.is-open:after {
  content: '\f056';
}

button.debumolaskus:hover, button.debumolaskus.is-open {
  background-color: #ddd;
}

.kidetacan-ulogopad {
  background-color: white;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

JS

Код
var accordions = document.getElementsByClassName("debumolaskus");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {

      content.style.maxHeight = null;
    } else {

      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

Также не забываем подключить шрифтовые иконки, что присутствую по правую сторону, где при открытие меняются по знакам.

Демонстрация
Прикрепления: 9929883.png(18.0 Kb) · sanudevas.zip(41.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать простой аккордеон на HTML и CSS (Как создать вертикальный аккордеон для сайта)
  • Страница 1 из 1
  • 1
Поиск: