22:28 Два варіанти акордеону на чистому CSS |
| 2 приклади створення акордеону без використання скриптів на чистому CSS. Один працює з використанням радіокнопок input type=radio, а інший з input type=checkbox. Оскільки з одинакових радіокнопок може бути обрана тільки одна, відповідно і вкладка акордеону також відкрита одна. Зразок акордеону з однією відкритою вкладкоюОпис вкладки Опис вкладки Опис вкладки 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> Зверніть увагу, що ID для кожної вкладки мають бути унікальними: input id="acor1" label for="acor1" Зразок акордеону з декількома відкритими вкладкамиЯкщо потрібно щоб відкривалось кілька вкладок, то просто замінюємо кнопкиОпис вкладки Опис вкладки Опис вкладки HtmlКод <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 для двох варіантівКод <style> .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: #29D4D2; 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: #000000; display: block; padding: 15px 20px; width: 100%; color: #29D4D2; 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: #696969; 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; } </style> |
|
|