Аккордеон на css
- Информация о материале
- Категория: Админ
- Просмотров: 531
Вариант создания аккордеона на чистом CSS
Пример:
Описание вкладки
Описание вкладки
Описание вкладки
HTML:
<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>
CSS:
.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; }
Обратите внимание, что ID для каждой вкладки должны быть уникальные:
<input id="acor1"> <label for="acor1">