ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивый аккордеон в исполнение CSS3

Красивый аккордеон в исполнение CSS3

Вашему вниманию простой по функциям горизонтальный аккордеон, что имеет красивый эффект при наведении на чистом CSS, где присутствуют 2 кнопки. Эти кнопки идут в самом начале, которые выставлены под обозначение, это зеленый и красный оттенок, а значит плюс и минус, но при открытии видим одну, при закрытии появляется вторая. Это просто супер круто, чтобы иметь возможность использовать все эти функциональные для возможности клика с открытием информации, который работает с помощью CSS.

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

Характеристика и свойства:

1. Чистый CSS - нет JS;
2. Простой стиль кодирования
3. CSS3 переходы с имитацией «автоматической высоты» через «максимальную высоту»;
4. Знаки плюс / минус и переключение контента на клике;
5. Плавная и ровная анимация в обоих направлениях;
6. Предоставлена семантически закодированная версия;
7. Пиксельная безупречная производительность во всех современных браузерах IE10 +

Так реально выглядит при открытие сайта:

Горизонтальный аккордеон с красивым эффектом при наведении на чистом C

Это уже в рабочем состояние, где был сделан клик по данному запросу:

Установка:

HTML

Код

<dl id="kaduisecaneg">
  <dt>
  <label for="toggle1">Нажмите для получения информации №1</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle1">
  <p>Paysafe - это удивительная компания, которая предлагает широкий спектр платежных решений, включая кредитные и дебетовые карты.</p>
  </dd>
  <dt>
  <label for="toggle2">Нажмите для получения информации №2</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle2">
  <p>Второе описание</p>
  </dd>
  <dt>
  <label for="toggle3">Нажмите для получения информации №3</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle3">
  <p>Третье описание</p>
  </dd>
  <dt>
  <label for="toggle4">Нажмите для получения информации №4</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle4">
  <p>Четвертое описание</p>
  </dd>
  <dt>
  <label for="toggle5">Нажмите для получения информации №5</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle5">
  <p>Пятое описание</p>
  </dd>
  <dt>
  <label for="toggle6">Нажмите для получения информации №6</label>
  </dt>
  <dd>
  <input type="checkbox" id="toggle6">
  <p>Крайнее описание</p>
  </dd>
</dl>

CSS

Код

/* --- CSS3 accordian --- */
#kaduisecaneg {
  margin: 34px auto;
  width: 724px;
  background: #ece9e9;
  border: 1px solid #afabab;
  border-radius: 6px;
  padding: 20px 25px 15px;
  box-shadow: 0 2px 11px 1px #191818;
  -webkit-text-size-adjust: none;
}
#kaduisecaneg dl, #kaduisecaneg dt, #kaduisecaneg dd {
margin:0;
}
#kaduisecaneg input {
display:none;
}
#kaduisecaneg label {
  display: inline-block;
  cursor: pointer;
  background: url(http://zornet.ru/Images/izobrazheniye/dasukin/minus-sign.png) 0 3px no-repeat;
  padding: 0 0 0 18px;
  text-shadow: 0 2px 3px #d8d8d8;
  font-weight: bold;
}
#kaduisecaneg p {
margin:5px 20px;
max-height:0;
overflow:hidden;
-moz-transition:.75s;-webkit-transition:.75s;-o-transition:.75s;transition:.75s;
}
#kaduisecaneg input:checked + p {
max-height:220px;
}
#kaduisecaneg input:checked + p:before {
  position: absolute;
  content: '';
  margin: -23px 0 0 -21px;
  height: 14px;
  width: 14px;
  padding: 1px;
  background: #ece9e9 url(http://zornet.ru/Images/izobrazheniye/dasukin/plus-sign.png) 1px 1px no-repeat;
}

Также предоставлена возможность открыть одну или несколько областей содержимого по умолчанию с помощью html-атрибута «флажок» во входном теге или с помощью чистого CSS.

Демонстрация

30 Мая 2020 Загрузок: 2 Просмотров: 1102 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0