Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Описание вкладки
Описание вкладки
Еще описание вкладки
И еще описание вкладки
Описание вкладки
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> |
Здравствуйте! А не подскажите как его по центру страницы разместить?
Примерно так:
.acor-container { margin: 20px auto; width: 340px; }Спасибо классный аккордиончик
Всем доброго дня, подскажите как сделать изначально закрытые вкладки?
Удалить checked="checked"
Спасибо большое
как сделать чтоб при нажатии на открытый блок он закрывался?
На жаве
что такое жаве?
На JS такое проще сделать
так в итоге как это сделать?
На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.
Дополнение: если текста больше чем на страницу.
bbobik.................., нормальный БАЯН - зря грешишь, всё работает в нормуль - ручки только нужны с головой, что бы для себя сие подделать!
Та же проблема, что только не делал - скроллит в конец страницы, плюнул и сделал на jquery из другого примера