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!
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
$('.accordion-2').squeezebox({
closeOthers: false,
timing: 300
});
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
$('.accordion-3').squeezebox({
// make sure you pass the element (el)
// as a parameter so you
// can gain acces to it
onOpen: function(el){
el.clickedEl.addClass('accordion_open');
},
onClose: function(el){
el.clickedEl.removeClass('accordion_open');
}
});