Super Smooth Accordion Component with jQuery and CSS
File Size: | 5.53 KB |
---|---|
Views Total: | 6074 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A dead simple accordion component with smooth panel open / close animations, built using plain HTML, CSS and a little jQuery magic.
How to use it:
1. Create headers and content panels for the accordion component.
<div class="container"> <div class="accordion"> <a href="#"> <h4>Accordion 1</h4> <i class="fa fa-plus-circle"></i> </a> </div> <div class="accordion-desc"> <h3>Accordion Heading 1</h3> <p>Accordion Content 1<p> </div> <div class="accordion"> <a href="#"> <h4>Accordion 2</h4> <i class="fa fa-plus-circle"></i> </a> </div> <div class="accordion-desc"> <h3>Accordion Heading 2</h3> <p>Accordion Content 2<p> </div> ... </div>
2. Style the accordion component whatever you like.
.accordion { position: relative; background-color: #fff; display: inline-block; width: 100%; border-top: 1px solid #f1f4f3; border-bottom: 1px solid #f1f4f3; font-weight: 700; color: #74777b; vertical-align: middle; } .accordion .fa { position: relative; float: right; } .accordion h4 { position: relative; top: 0.8em; margin: 0; font-size: 14px; font-weight: 700; } .accordion a { position: relative; display: block; color: #74777b; padding: 1em 1em 2.5em 1em; text-decoration: none; } .accordion a:hover { text-decoration: none; color: #2cc185; background-color: #e7ecea; transition: 0.3s; } .accordion-desc { background-color: #f1f4f3; color: #74777b; z-index: 2; padding: 20px 15px; }
3. Load jQuery library at the end of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
4. The jQuery script to active the accordion component.
$(document).ready(function() { $(".accordion-desc").fadeOut(0); $(".accordion").click(function() { $(".accordion-desc").not($(this).next()).slideUp('fast'); $(this).next().slideToggle(400); }); });
This awesome jQuery plugin is developed by mitchobert. For more Advanced Usages, please check the demo page or visit the official website.