Accordion Bootstrap Material Design / Элементы / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 4.6 Kb

Уникальный ID: 1103

Количество символов:

Посмотрели: 3781 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1103-20

Подбери: Домен для сайта

Скачали бесплатно: 83 раз

Прокомментировали: 0 раз

Рейтинг: 4.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: snippet, Сниппет, Bootstrap, Accordion, Element, Responsive, HTML, Элемент, адаптивные

Поделился: BootstrapТема

Добавлено: 2016-06-09 в 00:38

Метка: 1581146922

⇄ ⇅

.main_accordion .single_accordion{
 margin-bottom: 3px;
}
button.accordion {
 background:url(https://bootstraptema.ru/snippets/element/2016/abmd/accordion.png) no-repeat scroll right -114px #333;
 color: #fff;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 text-align: left;
 border: none;
 outline: none;
 transition: 0.5s;
 transition:background-color 0.5s ease-in-out;
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
}
button.accordion.active, button.accordion:hover {
 background:url(https://bootstraptema.ru/snippets/element/2016/abmd/accordion.png) no-repeat scroll right 10px #ec4848;;
}
div.panel {
 padding: 0.5rem;
 background-color: #fefefe;
 display: none;
 transition:all 0.6s;
 border: 1px solid #ddd;
}
div.panel p{
 margin-bottom: 0;
}
div.panel.show {
 display: block !important;
 margin-bottom: 0;
}
</style>

<div class="single_accordion">
 <button class="accordion">Accordion Bootstrap Material Design</button>
 <div class="panel">
 <p>Accordion Bootstrap Material Design Style Element Responsive. Адаптивный Аккордеон панель меню с оригинальным дизайном, предназначен для использования с плагином Bootstrap. <a href="https://bootstraptema.ru/stuff/snippets_bootstrap/elements/33" target="_blank">BootstrapTema Elements</a></p>
 </div>
 </div>

<div class="single_accordion">
 <button class="accordion active">Accordion Bootstrap Material Design</button>
 <div class="panel show">
 <p>Accordion Bootstrap Material Design Style Element Responsive. Адаптивный Аккордеон панель меню с оригинальным дизайном, предназначен для использования с плагином Bootstrap. <a href="http://bootstraptema.ru/stuff/snippets_bootstrap/elements/33" target="_blank">BootstrapTema Elements</a></p>
 </div>
 </div>

</div>

</div>
 </div>

BootstrapTema

Accordion Bootstrap Material Design

Скриншот

Подробнее

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

Просмотренные материалы

Всего комментариев: 0