Squeezebox.js is a minimal Vanilla JavaScript plugin that makes adding accordions to any website or app a metter of seconds.
It's powered by CSS3 transitions for increased performance, weighs around 1kb minified and Gziped and requires no extra library.
If you fancy a jQuery version instead you can get it here.
Squeezebox.js works out of the box. It expects a very minimal structure and does not add any DIVs or other HTML tags. It comes with predefined, overridable classes for its elements.
Here's the minimum required layout the plugin needs:
<div class="squeezebox">
<div class="squeezhead">
header #1
</div>
<div class="squeezecnt">
here goes the content
</div>
</div>
In your js file create a new instance of Squeezebox and fire the script with init():
var squeezebox = new Squeezebox();
squeezebox.init();
Here's the result:
Click me
You clicked me.
Hit me
Ouch!
Toggle me
Here I am.
Press me
This is just a default accordion...scroll for more options!
var squeezebox = new Squeezebox();
squeezebox.init();
The plugin comes with out-of-the-box, predefined classes for both the headers and the togglable content. At the same time by no means you are bound to use those. Just pass your classes as options of the plugin.
In the following example we're also defining a different speed of the opening/closing animation. Another option passed makes sure that open folders are not automatically closed when a new one is opened.
Further details in the docs.
We open
your content here
A little
your content here
Bit faster
your content here
Then the others
your content here
var squeezebox2 = new Squeezebox({
wrapperEl : '#squeezebox-2',
headersClass : 'myheader',
foldersClass : 'mycontent',
closeOthers : false,
speed : '.3s'
});
squeezebox2.init();
Along with the set of option shown above the plugin offers two different callbacks you can hook to. One is fired when opening a folder, the other when closing it. Both expose the whole object created at init time.
This allows for easy access to the elements such as the headers and the folders so, for example, we can toggle classes when the accordion is used.
Further details in the docs.
Nice arrows
your content here
Header #2
your content here
Header #3
your content here
Header #4
your content here
$('.accordion-3').squeezebox({
// make sure you pass your parameters
// to the function so you
// can gain acces to the elements you need
onOpen: function(wrapper, clickedHeader, content){
clickedHeader.classList.add('accordion_open')
},
onClose: function(el){
clickedHeader.classList.remove('accordion_open')
}
});
CSS3 transitions are leveraged to get buttery smooth, fast and lightweight animation to the toggling event, both on desktop and mobile. This means the plugin natively targets modern browsers that can render CSS transitions.
Thus, it made sense (to me at least!) to leave legacy support out of the core, providing a much lighter plugin and relying on polyfills when fallback is needed.
If you need a fallback for older browsers you can either provide support through polyfills (look here and here) - but note that it's currently untested - or try the jQuery version of this same plugin.
Squeezebox is configured to work out-of-the-box if the default html structure is provided. Any option can be overridden during instantiation, though.
Here is a full overview of the configuration settings.
These are the default values that get used if no options are passed.
$('.accordion-wrap').squeezebox({
wrapperEl: '.squeezebox',
headersClass: 'squeezhead',
foldersClass: 'squeezecnt',
closeOthers: true,
speed : '.7s'
});
You can fork or download the latest version of the plugin directly from the github repo.