Пятница, 29.03.2024, 09:48
Главная Регистрация RSS
Приветствую Вас, Гость
НОВЫЕ КОМЕНТАРИИ
1: Слайдер с увеличением картинки для ucoz
Добавил:Vj PitBulvjpitbul94
Коментарий:Сколько лет прошло, старина?) зарегался, просто вспомнить те времена,

2: Слайдер с увеличением картинки для ucoz
Добавил:Modred
Коментарий:Всё исправил, проверил , скачивайте

3: Очень красивая торрент таблица для uCoz (pHp)
Добавил:ZemHU
Коментарий:Классный скрипт , но на PHP

4: ppkBB3cker - движок торрент-трекера
Добавил:DexonEdutt
Коментарий:Отличный движок ppkBB3cker - движок торрент-трекера
Добавил:Mixhoarm
Коментарий:Легко установить Ремонт и отделка. Контакты: +7 (926) 214-53-53
Добавил:Михаил
Коментарий:Среди Московских фирм, G - group самая надёжная и ответственная компан

Статистика

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

Нас сегодня посетили :
Поиск
Главная » Файлы » Скрипты для UCOZ » Другие скрипты для 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;
}

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

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

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

Категория: Другие скрипты для UCOZ | Добавил: Modred | Теги: функциональный, аккордеон, css, Ucoz, скрипты, укоз, разные
Просмотров: 452 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: