Create A Responsive Accordion with jQuery and CSS3 - Squeezebox.js

Squeezebox.js is an ultra-light JQuery plugin to create a responsive accordion interface that allows revealing hidden panels with smooth CSS3 animations.

Basic Usage

1. Create the Html for an accordion containing several hidden content panels.

<section class="demo">
<header class="squeezhead">
<p> Title 1 </p>
</header>
<div class="squeezecnt">
<p> Content 1 </p>
</div>
<header class="squeezhead">
<p> Title 2 </p>
</header>
<div class="squeezecnt">
<p> Content 2 </p>
</div>
<header class="squeezhead">
<p> Title 3 </p>
</header>
<div class="squeezecnt">
<p> Content 3 </p>
</div>
<header class="squeezhead">
<p> Title 4 </p>
</header>
<div class="squeezecnt">
<p> Content 4 </p>
</div>
</section>

2. Include jQuery javascript library and the jQuery Squeezebox.js at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="squeezebox.js"></script> 

3. The sample CSS rules to style the accordion.

.squeezhead {
background: #c2c2c2;
border: 1px solid #cccccc;
padding: 6px;
color: #3481a3;
position: relative;
cursor: pointer;
}
.squeezhead:hover {
background: #bfbfbf;
}
.squeezhead p {
font-weight: bold;
margin: 5px 15px;
}
.squeezhead .icon-arrow-right {
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size: 1.5em;
display: inline-block;
top: 13px;
right: 15px;
position: absolute;
}
.squeezecnt {
background: #BFC4C5;
padding: 20px;
}
.squeezecnt p {
margin: 0;
}

4. Call the function with all default settings.

$('.demo').squeezebox();

5. Available options and callbacks.

• headers (property/string): the class of the headers of each folder
• folders (property/string): the class of the folders that get shown/hidden by the plugin
• closeOthers (property/boolean): if set to true only one folder per accordion can be open at one time. If set to false the user will be able to see the content of multiple folder at once.
• closedOnStart (property/boolean): if set to true the accordion will appear closed at page load.
• animated (property/boolean):  if set to true the folders will be animating when opened. Set to false to avoid animation.
• onOpen (method/function) : callback fired when opening a folder.
• onClose(method/function): callback fired when closing a folder.

---

This awesome jQuery plugin is developed by nobitagit. For more Advanced Usages, please check the demo page or visit the official website.