Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Описание вкладки
Описание вкладки
Еще описание вкладки
И еще описание вкладки
Описание вкладки
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> |
Читал, что длинные вложенности в css это плохо, так как влияет на скорость загрузки страницы. А у вас присутствуют. Есть мнение, что лучше добавить class или id.
не понял про вложенность...
весь CSS до 500кб это хорошо, но 100 конечно же лучше 🙂
имел в виду длинную вложенность в селекторах css. Например у вас было в css:
19 строка .acor-container .acor-body p {
margin: 0 0 10px;
}
Input и label идут без класса, поэтому для всей конструкции я прописал родителя acor-container.
Для .acor-body p он не нужен, но это капля в океане, если брать в расчет скорость загрузки страницы.
Input и label нельзя класс задать?
Можно, а зачем? 🙂
10 раз писать class=""acor-input" и class=""acor-label" ?
Так, по вашему, проще ?
Я не знаю, что и где вы прочитали, но просто включите логику 🙂
Есть, например класс, который часто встречается в шаблонах
Т.е. привязка идет от головы страницы. Почему она не удобна? Не потому, что там лишних 65 байт, что в целом будет 6кб, если использовать 100 раз ее.
А потому что, если вам потребуется взять оформление текста .block-text-val в теле на странице услуги, то не получится, не говоря уже, если нам потребуется поставить всю секцию. И вот это не удобно.
Баланс должен быть между тем, что удобно писать и удобно использовать.
Подскажите, пожалуйста, как сделать чтобы при открытии страницы в браузере все вкладки аккордеона находились в свернутом (закрытом) состоянии? И только после клика мышкой на нужную - она разворачивалась. Заранее благодарю.
Удалить checked="checked"
Огромное спасибо!!!!
Я удалил атрибуты name и checked и все равно все работает нормально. Зачем вы их добавили, если без них тоже работает?
Как сделать так, чтобы акордион открывался и закрывался при нажатии только на стрелку, а не на весь "заголовок вкладки"?
Как вариант:
Благодарю, работает
Не подскажите как скруглить края у аккордеона?
Добавить к классу .acor-container label стиль border-radius: 10px;
Спасибо большое! Не знала куда именно это вставить
Доброго времени суток. Подскажите пожалуйста как сделать чтобы ширина аккордеона менялась в зависимости от устройства. т.е. аккордеон стал адаптивный под все устройства ? спасибо
А он плавающий же по ширине (100%)
Это не в нем проблема, а в контейнере, в котором он находится
Здравствуйте! А не подскажите как его по центру страницы разместить?
Примерно так:
Спасибо классный аккордиончик
Всем доброго дня, подскажите как сделать изначально закрытые вкладки?
Удалить checked="checked"
Спасибо большое
как сделать чтоб при нажатии на открытый блок он закрывался?
На жаве
что такое жаве?
На JS такое проще сделать
так в итоге как это сделать?
На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.
Дополнение: если текста больше чем на страницу.
bbobik.................., нормальный БАЯН - зря грешишь, всё работает в нормуль - ручки только нужны с головой, что бы для себя сие подделать!
Та же проблема, что только не делал - скроллит в конец страницы, плюнул и сделал на jquery из другого примера