The headers below should display their corresponding section when clicked, hiding whichever section is currently visible. The "detach" link below should disable this behavior while the "attach" link should re-enable it. Also note that unlike the other examples on this page, this accordion will initialize without an effect (the first section will instantly be visible).

first section
I'm the content for the first section.
second section
I'm the content for the second section.
third section
I'm the content for the third section.
detach | attach

This example should behave as above, except the sections will be visible when you mouseover the headers, rather than click.

first section
I'm the content for the first section.
second section
I'm the content for the second section.
third section
I'm the content for the third section.

The section below should have a 4th section, added dynamically, which is clickable like the others.

first section
I'm the content for the first section.
second section
I'm the content for the second section.
third section
I'm the content for the third section.

This example allows you to hide all the sections. You can expose any single section and click its header again to hide it without exposing another one.

first section
I'm the content for the first section.
second section
I'm the content for the second section.
third section
I'm the content for the third section.

This section initializes with the second section visible rather than the first.

first section
I'm the content for the first section.
second section
I'm the content for the second section.
third section
I'm the content for the third section.