jQuery Squeezebox.js Plugin Demos

Minimal usage

Click me

You clicked me.

Hit me


Toggle me

Here I am.

Press me

This is just a default accordion...scroll for more options!

Advanced usage

Even though the plugin comes with out-of-the-box, predefined classes for both the headers and the togglable content by no means you are bound to use those. Just pass them 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.

We open

your content here

A little

your content here

Bit faster

your content here

Then the others

your content here

 closeOthers: false,
 timing: 300

Accordion with callbacks

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 accessing to the elements such as the headers and the folders so we can toggle classes when the accordion is used.

Nice arrows

your content here

Header #2

your content here

Header #3

your content here

Header #4

your content here

  // make sure you pass the element (el)
  // as a parameter so you
  // can gain acces to it

  onOpen: function(el){
  onClose: function(el){