Author: | mwitty |
---|---|
Views Total: | 4,500 views |
Official Page: | Go to website |
Last Update: | September 22, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS, responsive, accessible accordion that uses CSS3 transitions for smooth open / close animations. It uses checkbox + label or radio + label hacks for toggling accordion panels, depending on whether one or multiple panels can be open at the same time.
Basic usage:
Create an accordion using html unordered list and the checkbox hack. It means that multiple accordion panels can be opened at a same time.
<ul class="accordion css-accordion"> <li class="accordion-item"> <input class="accordion-item-input" type="checkbox" name="accordion" id="item1" /> <label for="item1" class="accordion-item-hd">Accordion Heading 1<span class="accordion-item-hd-cta">▲</span></label> <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li class="accordion-item"> <input class="accordion-item-input" type="checkbox" name="accordion" id="item2" /> <label for="item2" class="accordion-item-hd">Accordion Heading 2<span class="accordion-item-hd-cta">▲</span></label> <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li class="accordion-item"> <input class="accordion-item-input" type="checkbox" name="accordion" id="item3" /> <label for="item3" class="accordion-item-hd">Accordion Heading 3<span class="accordion-item-hd-cta">▲</span></label> <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> </ul>
The required CSS / CSS3 styles.
.accordion { border: 1px solid white; padding: 0 10px; margin: 0 auto; list-style: none outside; } .accordion > * + * { border-top: 1px solid white; } .accordion-item-hd { display: block; padding: 15px 30px 15px 0; position: relative; cursor: pointer; font-size: 18px; font-weight: bold; } .accordion-item-input:checked ~ .accordion-item-bd { max-height: 1000px; padding-top: 15px; margin-bottom: 15px; -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; } .accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .accordion-item-hd-cta { display: block; width: 30px; position: absolute; top: calc(50% - 6px ); right: 0; pointer-events: none; -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); text-align: center; font-size: 12px; line-height: 1; } .accordion-item-bd { max-height: 0; margin-bottom: 0; overflow: hidden; -webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; } .accordion-item-input { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1; overflow: hidden; position: absolute; left: -9999px; }
Thats very nice. Could you tell me what to change to start accordion with open panels?