Author: | matthewscott_ |
---|---|
Views Total: | 5,018 views |
Official Page: | Go to website |
Last Update: | November 3, 2016 |
License: | MIT |
Preview:

Description:
A pure HTML/CSS accordion component that uses CSS3 transitions for smooth animations when expanding/collapsing.
How to use it:
The basic html structure for the accordion. In this case, we’re going to use html checkbox and label for the toggles.
<div class="block"> <div> <input type="radio" name="item" id="item-one" checked hidden /> <label for="item-one">Item 1</label> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p> </div> </div> <div> <input type="radio" name="item" id="item-two" hidden /> <label for="item-two">Item 2</label> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p> </div> </div> <div> <input type="radio" name="item" id="item-three" hidden /> <label for="item-three">Item 3</label> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p> </div> </div> <div> <input type="radio" name="item" id="item-four" hidden /> <label for="item-four">Item 4</label> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p> </div> </div> <div> <input type="radio" name="item" id="item-five" hidden /> <label for="item-five">Item 5</label> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p> </div> </div> </div>
The primary CSS and CSS3 styles.
.block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: #fafafa; overflow: hidden; margin: 50px auto; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color: #e6e6e6; color: black; } .block > div:nth-child(1):before { content: "1"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(2):before { content: "2"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(3):before { content: "3"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(4):before { content: "4"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div:nth-child(5):before { content: "5"; width: 20px; font-weight: bold; text-align: center; position: absolute; left: 0; top: 0; background-color: #466970; padding: 7.5px; margin: 0; color: white; } .block > div input + label { cursor: pointer; display: block; padding: 7.5px 15px; background-color: #a2c0c6; -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s; transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s; color: black; } .block > div input ~ div { visibility: hidden; max-height: 0; padding: 0; opacity: 0; -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s; transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s; } .block > div input ~ div p { padding: 0 15px; } .block > div input:checked + label { background-color: #739fa8; -webkit-transition: background-color 0s ease-in-out 0s; transition: background-color 0s ease-in-out 0s; color: black; } .block > div input:checked ~ div { display: block; opacity: 1; visibility: visible; max-height: 200px; padding: 15px 0; -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s; transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s; }
Very useful and light