Четверг, 17.01.2019, 06:37
Главная Регистрация RSS
Приветствую Вас, Гость
НОВЫЕ КОМЕНТАРИИ
Тема: Где скачать UTHEMES ??
Ник: ياسين
Тема: молодец

--- ...
Тема: Требуется администратор д...
Ник: mytorrento
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас сегодня посетили :
Поиск
Главная » Файлы » СКРИПТЫ ДЛЯ UCOZ » РАЗНЫЕ СКРИПТЫ УКОЗ

Функциональный аккордеон на чистом CSS

Функциональный аккордеон на чистом CSS

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

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

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

Приступаем к установке:

HTML

Код
<div class="afunc-tionality">
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item1">
  <label for="item1" class="dejamos-eldigo">remmosmash.ru1</label>
  <p class="ventajas-desventajas">Первое описание что по умолчанию</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item2">
  <label for="item2" class="dejamos-eldigo">remmosmash.ru 2</label>
  <p class="ventajas-desventajas">Очень хорошая статья</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item3">
  <label for="item3" class="dejamos-eldigo">remmosmash.ru 3</label>
  <p class="ventajas-desventajas">Также можете мануал написать</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item4">
  <label for="item4" class="dejamos-eldigo">remmosmash.ru 4</label>
  <p class="ventajas-desventajas">Здесь описание</p>
  </div>
  </div>

 


CSS

 

Код

* {
  box-sizing: border-box;
}

.afunc-tionality input {
  display: none;
}

.dejamos-eldigo {
  display: block;
  padding: 17px;
  background: #2f578a;
  color: #fbf6f6;
  font-size: 20px;
  cursor: pointer;
  border-bottom: 1px solid #c5c1c1;
}
.dejamos-eldigo:hover {
  background: rgba(17, 78, 123);
}

.ventajas-desventajas {
  height: 0;
  overflow: hidden;
  margin: 0;
  transition: all 0.5s;
}

.afunc-tionality input:checked ~ .ventajas-desventajas{
  height: auto;
  margin: 15px 0;
}

ПОСМОТРЕТЬ ДЭМО ВЕРСИЮ

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

Похожие материалы:

Категория: РАЗНЫЕ СКРИПТЫ УКОЗ | Добавил: Modred | Теги: Ucoz, css, функциональный, аккордеон
Просмотров: 37 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Все смайлы
Код *: