Simple Stylish Accordion Widget with jQuery and CSS
File Size: | 6.89 KB |
---|---|
Views Total: | 9328 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight and stylish jQuery accordion widget that allows you to expand or collapse sections of content with a subtle sliding effect by clicking headers.
How to use it:
1. Create content panels for the accordion widget using plain Html structure like this:
<div class="accordion"> <div class="item"> <div class="heading">This is the first title</div> <div class="content">This is the first content</div> </div> <div class="item"> <div class="heading">This is the second title</div> <div class="content">This is the second content</div> </div> <div class="item"> <div class="heading">This is the third title</div> <div class="content">This is the third content</div> </div> </div>
2. The required CSS to style the accordion widget. You can change the width, color, border to fit your design needs.
.accordion { width: 500px; border-radius: 5px; overflow: hidden; margin: auto; } .accordion .item .heading { height: 50px; line-height: 50px; font-size: 17px; cursor: pointer; color: #fff; padding-left: 15px; background: #ee6363 url('arrow.png') no-repeat; background-position: right 20px top -95px; border-bottom: 1px solid #ec8484; box-sizing: border-box; } .accordion .item.open .heading, .accordion .item:last-child .heading { border: 0; } .accordion .item.open .heading { background-position: right 20px top -5px; } .accordion .item .content { display: none; padding: 15px; background: #fff; font-size: 14px; }
3. Include the latest version of jQuery library at the bottom of the document.
<link href="//www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet">
4. The Javascript to active the accordion widget.
$('.accordion .item .heading').click(function() { var a = $(this).closest('.item'); var b = $(a).hasClass('open'); var c = $(a).closest('.accordion').find('.open'); if(b != true) { $(c).find('.content').slideUp(200); $(c).removeClass('open'); } $(a).toggleClass('open'); $(a).find('.content').slideToggle(200); });
This awesome jQuery plugin is developed by lmprht. For more Advanced Usages, please check the demo page or visit the official website.