Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Описание вкладки
Описание вкладки
Еще описание вкладки
И еще описание вкладки
Описание вкладки
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="acor-container"> <input type="radio" name="acor" id="acor1" checked="checked" /> <label for="acor1">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> <input type="radio" name="acor" id="acor2" /> <label for="acor2">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> <input type="radio" name="acor" id="acor3" /> <label for="acor3">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> </div> |
Обратите внимание, что ID для каждой вкладки должны быть уникальные:
<input id="acor1">
<label for="acor1">
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.acor-container { margin: 20px 0; } .acor-container .acor-body { width: calc(100% - 40px); margin: 0 auto; height: 0; color: rgba(0, 0, 0, 0); background-color: #BFE2FF; line-height: 18px; padding: 0 30px; box-sizing: border-box; transition: color 0.5s, padding 0.5s; overflow: hidden; font-family: Verdana, sans-serif; font-size: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.2); } .acor-container .acor-body p { margin: 0 0 10px; } .acor-container label { cursor: pointer; background-color: #337AB7; display: block; padding: 15px 20px; width: 100%; color: #BFE2FF; font-weight: 300; box-sizing: border-box; z-index: 100; font-family: Verdana, sans-serif; font-size: 18px; margin: 0 0 5px; transition: color .35s; } .acor-container label:hover { color: #FFF; } .acor-container input{ display: none; } .acor-container label:before { content: '\276F'; float: right; } .acor-container input:checked + label { background-color: #285f8f; color: #FFF; box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3); } .acor-container input:checked + label:before { transition: transform .35s; transform: rotate(90deg); } .acor-container input:checked + label + .acor-body { height: auto; margin-top: -5px; color: #000; padding: 20px 30px 10px; } |
Пример аккордеона с несколькими открытыми вкладками
Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки <radio> на флажки <checkbox>
Описание вкладки
Описание вкладки
Еще описание вкладки
И еще описание вкладки
Описание вкладки
Описание вкладки
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="acor-container"> <input type="checkbox" name="chacor" id="chacor1" checked="checked" /> <label for="chacor1">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> <input type="checkbox" name="chacor" id="chacor2" /> <label for="chacor2">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> <input type="checkbox" name="chacor" id="chacor3" /> <label for="chacor3">Заголовок вкладки</label> <div class="acor-body"> <p>Описание вкладки</p> </div> </div> |
Спасибо классный аккордиончик
Всем доброго дня, подскажите как сделать изначально закрытые вкладки?
Удалить checked="checked"
Спасибо большое
как сделать чтоб при нажатии на открытый блок он закрывался?
На жаве
что такое жаве?
На JS такое проще сделать
На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.
Дополнение: если текста больше чем на страницу.
bbobik.................., нормальный БАЯН - зря грешишь, всё работает в нормуль - ручки только нужны с головой, что бы для себя сие подделать!
Та же проблема, что только не делал - скроллит в конец страницы, плюнул и сделал на jquery из другого примера