Author: | benbowes |
---|---|
Views Total: | 3,242 views |
Official Page: | Go to website |
Last Update: | June 25, 2018 |
License: | MIT |
Preview:

Description:
A pure JavaScript/HTML5/CSS approach to create a vertical accordion with smooth sliding effects based on CSS3 transitions.
How to use it:
Create the Html structure for the accordion.
<section class="accordion"> <article class="accordion-panel"> <a class="accordion-panel__heading" href="javascript:;">Accordion Panel One</a> <div class="accordion-panel__content"> <h4>Title One</h4> <p>Description One</p> </div> </article> <article class="accordion-panel"> <a class="accordion-panel__heading" href="javascript:;">Accordion Panel Two</a> <div class="accordion-panel__content"> <h4>Title Two</h4> <p>Description Two</p> </div> </article> <article class="accordion-panel"> <a class="accordion-panel__heading" href="javascript:;">Accordion Panel Three</a> <div class="accordion-panel__content"> <h4>Title Three</h4> <p>Description Three</p> </div> </article> ... </section>
Style the accordion in the CSS.
.accordion { border-radius: 3px; overflow: hidden; border: 3px solid #6495ED; } .accordion-panel { border: 0px #6495ED solid; transition: all .6s .2s ease; } .accordion-panel.active { transition: all .2s .6s; border-left: 15px #6495ED solid; } .accordion-panel__heading { padding: 20px; display: block; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #6495ED; background: #f5f5f5; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; font-weight: 600; border-bottom: 1px solid #6495ED; transition: all .6s; cursor: pointer; } .accordion-panel__heading:HOVER { color: #333; background: #f1f1f1; transition: all .2s; } .active .accordion-panel__heading:HOVER, .active .accordion-panel__heading { color: #333; background: #fff; border-bottom: 0; } .accordion-panel__content { padding: 0 20px 0 20px; background: #f1f1f1; max-height: 0; overflow: hidden; transition: all .6s; } .active .accordion-panel__content { max-height: 500px; padding: 0 20px 20px 20px; background: #fff; }
The JavaScript to enable the accordion. Include the myAPP.js
directly into your document.
<script src="myAPP.js"></script>
Changelog:
06/25/2018
- Use Element.classList