ZorNet.Ru — сайт для вебмастера » HTML и CSS » Аккордеон вкладок на чистом CSS + HTML

Аккордеон вкладок на чистом CSS + HTML

Аккордеон вкладок на чистом CSS + HTML
Отличное решение для размещения материала, как аккордеон, что идет на чистом CSS, где по умолчанию при открытии страницы идет открытая вкладка. Здесь мы рассмотрим вариант создание вертикально горизонтального аккордеон, где весь функционал задействован лишь технологии стилистике CSS. Открываются разделы по вертикальной вариации, но выглядит как горизонтальный стиль вкладок.

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

Цветовую гамму можно самостоятельно менять под свой сайт.

Как создать вертикальный аккордеон для сайта

Установка:

HTML

Код
<div class="askuveme_vkladok">  
   
  <input type="radio" name="kladka" id="kladka1" checked="checked" />
  <label for="kladka1">Название вкладки</label>
  <div class="expandable_tab">
  <p>Краткое описание по материалу</p>
  </div>
   
  <input type="radio" name="kladka" id="kladka2" />
  <label for="kladka2">Заголовок материала</label>
  <div class="expandable_tab">
  <p>Краткое описание по материалу</p>
  </div>
   
  <input type="radio" name="kladka" id="kladka3" />
  <label for="kladka3">ZorNet.Ru — сайт для вебмастера</label>
  <div class="expandable_tab">
  <p>Краткое описание по материалу</p>
  </div>  
   
</div>

CSS

Код
.askuveme_vkladok {
  margin: 20px 0;
}
.askuveme_vkladok .expandable_tab {
  width: calc(100% - 40px);
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);
  background-color: #BFE2FF;
  line-height: 18px;
  padding: 0 30px;
  box-sizing: border-box;
  transition: color 0.5s, padding 0.5s;
  overflow: hidden;
  font-family: Verdana, sans-serif;  
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.2);
}
.askuveme_vkladok .expandable_tab p {
  margin: 0 0 10px;
}
.askuveme_vkladok label {
  cursor: pointer;
  background-color: #337AB7;
  display: block;
  padding: 15px 20px;
  width: 100%;
  color: #BFE2FF;
  font-weight: 300;
  box-sizing: border-box;
  z-index: 100;
  font-family: Verdana, sans-serif;  
  font-size: 18px;
  margin: 0 0 5px;
  transition: color .35s;
}
.askuveme_vkladok label:hover {
  color: #FFF;
}
.askuveme_vkladok input{
  display: none;
}
.askuveme_vkladok label:before {
  content: '\276F';
  float: right;
}
.askuveme_vkladok input:checked + label {
  background-color: #285f8f;
  color: #FFF;
  box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
}
.askuveme_vkladok input:checked + label:before {
  transition: transform .35s;
  transform: rotate(90deg);
}
.askuveme_vkladok input:checked + label + .expandable_tab {
  height: auto;
  margin-top: -5px;
  color: #000;
  padding: 20px 30px 10px;
}

Этот пример аккордеона создан без задействования скриптов и библиотеке, где полный функционал идет в закрепленном CSS. А значит цветовой оттенок меняет там, и анимацию раскрытие для показа, что находиться во вкладках.

Демонстрация
27 Октября 2020 Загрузок: 2 Просмотров: 1361 Комментариев: (9)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 9
UKRO
UKRO 03 Ноября 2020 13:511
0
А как сделать, чтобы по умолчанию вкладка была закрыта? Мне например нужна только 1 вкладка для описания материала, и чтобы при нажатии оно плавно открывалось..
Kosten
Kosten 03 Ноября 2020 14:032
+1
Здесь в поиске можно разных вкладок найти, как пример эти можете посмотреть вкладки, которые по умолчанию закрыты.
Dysha
Dysha 04 Ноября 2021 01:556
+2
Уберите из файла следующий код: checked="checked".
Тогда все вкладки будут закрыты.
Maryges
Maryges 04 Ноября 2021 02:337
0
Как информацию нужно в самом материале разместить.
Dysha
Dysha 04 Ноября 2021 04:278
0
Между тегами <p>...</p>
Kosten
Kosten 04 Ноября 2021 23:029
0
Думаю, кому нужна такая информация, то в комментариях он ее найдет. Оттенок цвета поменяю, чтоб замечен был.
UKRO
UKRO 03 Ноября 2020 16:113
0
Цитата Kosten ()
Здесь в поиске можно разных вкладок найти, как пример эти можете посмотреть вкладки, которые по умолчанию закрыты.

Спасибо. Забрал 09a
noavatar
infoaverel 02 Марта 2021 11:004
0
Вместо стрелки отображается пустой квадратик. Как подтянуть изображение стрелки?
Kosten
Kosten 02 Марта 2021 15:335
0
Чтоб стрелки отображались, то для этого нужно подключить шрифтовые знаки, что можете попробовать.

Про шрифтовые знаки
avatar