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

Простой адаптивный аккордеон на CSS3

Простой адаптивный аккордеон на CSS3
Отличное решение для простого аккордеона, который использует HTML CSS и JavaScript, также присутствует эффекта раскрытие категорий при клике. Где также в аналогичном плане можно называть, это просто легкий аккордеон при помощи CSS и также с помощью JQuery. Вероятно вам встречались много типов аккордеона на тематических сайтах, где просто оформлены под основной стиль, но характер работы и направление действий у всех аналогический.

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

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

Сначала рассмотрим работа этого материала, где идет по умолчанию или при открытие сайта, также страницы, где находится аккордеон.

Пишем аккордеон с применением эффектов

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

Простой аккордеон для сайта с помощью jQuery

Остается вид с мобильного аппарата, что все корректно выводится, где также весь материал помещается.

Отзывчивый аккордеон с помощью jQuery

Установка:

Поставим библиотеку у кого она еще не установлена на сайте.

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

HTML

Код
<div class="cipenan-celines">
  <ul class="duthoning">
  <li>
  <button class="koducion-mautegad"><h2>ZorNet.Ru — сайт для Вебмастер</h2></button>
  <div class="mesiten-senaple">
  <p>Первое описание</p>
  </div>
  </li>
  <li>
  <button class="koducion-mautegad"><h2>Web Меню для сайта</h2></button>
  <div class="mesiten-senaple">
  <p>Второе по материалу написано.</p>
  </div>
  </li>
  <li>
  <button class="koducion-mautegad"><h2>Всплывающие окна Ajax</h2></button>
  <div class="mesiten-senaple">
  <p>Третий тематический мануал.</p>
  </div>
  </li>
   
  <li>
  <button class="koducion-mautegad"><h2>Лицензионные ключи NOD 32 генератор</h2></button>
  <div class="mesiten-senaple">
  <p>Здесь также можно поставить информер.</p>
  </div>
  </li>
  </ul>
</div>

CSS

Код
h2 {
  color: #496984;
  font-size: 19px;
  letter-spacing: 1px;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  text-shadow: 0 1px 0 #e6e4e4;
}
p {
  color: #3c3939;
  font-size: 18px;
  line-height: 1.4;
  margin: 18px;
  font-family: 'Alegreya Sans SC', sans-serif;
}
.cipenan-celines {
  max-width: 640px;
  margin: 0 auto;
}
.duthoning {
  margin: 90px 0;
  overflow: hidden;
  padding: 0;
}
.duthoning li {
  list-style-type: none;
  padding: 0;
}
.koducion-mautegad {
  background: #fdfdfd;
  border: none;
  border-bottom: solid 1px #928f8f;
  cursor: pointer;
  display: block;
  outline: none;
  padding: 2em;
  position: relative;
  text-align: center;
  width: 100%;
}
.koducion-mautegad:before {
  background: #e20e0e;
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(-90deg);
  transition: all 0.2s ease-in-out;
  width: 15px;
}
.koducion-mautegad:after {
  background: #e20e0e;
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 15px;
}
.koducion-mautegad.pevuden:before {
  transform: rotate(0deg);
}
.koducion-mautegad.pevuden h2, .koducion-mautegad:focus h2 {
  position: relative;
  color: #ff8383;
}
.mesiten-senaple {
  background: #ded9d9;
  display: none;
  overflow: hidden;
}

JS

Код
$(function() {
  $('.koducion-mautegad').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('pevuden')) {
  $(this).removeClass('pevuden');
  $(this).next()
  .stop()
  .slideUp(300);
  } else {
  $(this).addClass('pevuden');
  $(this).next()
  .stop()
  .slideDown(300);
  }
  });
});

Для создания этого аккордеона вам нужно создать 3 файла, первый для HTML, второй для CSS и третий для JavaScript. Другими словами, это легкий аккордеон с минимальным дизайном с использованием jQuery.

Предварительный просмотр jQuery Accordion с минимальным дизайном можно посмотреть на demo странице, где сразу оценить, ведь он идет в своих родных элементах, где не присутствует оформление, что уже самостоятельно создадите.

Демонстрация
28 Июня 2019 Загрузок: 1 Просмотров: 1546 Комментариев: (0)

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

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

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

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