Скрипт вид материалов для UCOZ [42] |
Информеры для UCOZ [25] |
Меню для UCOZ [18] |
Слайдер для UCOZ [11] |
Кнопки для UCOZ [21] |
МИНИ ПРОФИЛЬ УКОЗ [4] |
Скрипты мини-чатов для UCOZ [10] |
Страница 404 для UCOZ [3] |
Скрипты статистики для UCOZ [5] |
Скрипты PHP для UCOZ [4] |
Другие скрипты для UCOZ [131] |
Тема: Stepform - Виджеты для повышен... | |
Форум: "Полезные сслыки |
Тема: REG.RU - бесплатный хостинг д... | |
Форум: "Полезные сслыки |
Тема: Бесплатный веб хостинг с PHP | |
Форум: "Полезные сслыки |
Тема: Sape | |
Форум: "Полезные сслыки |
Тема: Ukit - конструктор сайтов для ... | |
Форум: "Полезные сслыки |
Тема: Megaindex.ru | |
Форум: "Полезные сслыки |
Тема: TeaserNet.com | |
Форум: "Полезные сслыки |
1. RemMosMash.ru - ремонт бытовой техники Сайт: https://remmosmash.ru |
2. МастерРБТ - ремонт стиральных машин в Домодедово Сайт: https://masterrbt.ru/ |
3. Ремонт и отделка. Контакты: +7 (926) 214-53-53 Сайт: http://www.remgam.ru/ |
4. Адвокатский кабинет Шишук А.Б. Сайт: http://ADVOKAT-SHISHUK.RU |
5. Автозапчасти-СПАКСЕР Сайт: http://spacser-shop.com.ua |
6. Islamiconline.ru Сайт: https://islamiconline.ru/ |
7. Покупаем электродвигатели Сайт: http://stanprivod.ru |
8. Кабинет Информатики Сайт: http://kabinfo.ucoz.ru/ |
9. Торрент портал Сайт: http://utrutor.ucoz.org/ |
10. ООО "Корпорация АЕГ" Сайт: http://aeg-med.ru/ |
11. Татобзор.ру Сайт: https://tatobzor.ru/ |
12. Займ онлайн. Кредитуем всех 24 часа. Сайт: http://vyberi-uslugi.ru |
13. Автозапчасти-СПАКСЕРВИС Сайт: https://spacser.com.ua |
14. AndroSoft Сайт: http://androsoft.ucoz.ru |
15. Заработок в интернете без вложений Сайт: http://seodengi.ucoz.org/ |
Главная » Файлы » Скрипты для UCOZ » Другие скрипты для UCOZ |
Функциональный аккордеон на чистом CSS
Если вам нужно поместить информацию в одном месте, где еще распределить по категориям, то функциональный аккордеон на CSS отличное решение. Здесь вы можете поместить как описание так и различные картинки, так как основная работа, это по умолчанию скрывать информацию, но выводит ее название. Где по клику в самом низу категорий открывается раздел с категориями, и вы прочитав можете закрыть и преступить к следующему. Код
<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>
Код
* { 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; } | |
ПОСМОТРЕТЬ ДЭМО ВЕРСИЮК материалу оставили ссылку на демоверсию, по которой вы можете оценить функционал данного материала. При обнаружении ссылки, не содержашей демоверсии, сообщите об этом Администратору. | |
| |
Похожие материалы: | |
Просмотров: 457 | Загрузок: 0 | |
Всего комментариев: 0 | |