Section 1

Section 1 Content
This is the jQuery Accordion Widget.
See Section 3 to find out why this is so tall.
Or we could have set the autoheight option to false $("#accordion").accordion({ autoHeight: false});

Documentation: see the autoheight parameter

Section 2

Section 2 Content
Use this when you have multiple sections and want only one visible at a time.

In this example you can close all the sections because the collapsible option is set to true

$("#accordion").accordion({ collapsible: true });

Try it. Click the bar above that says "Section 2"

Section 3

Section 3 Content
Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.

Section 4

Section 4 Content
Thanks for reading all four sections.

More general content.
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. jQueryUI introduction

And now another accordion

Section 1

Section 1 Content
This is the jQuery Accordion Widget.
See Section 3 to find out why this is so tall.
Or we could have set the autoheight option to false $("#accordion").accordion({ autoHeight: false});

Documentation: see the autoheight parameter

Section 2

Section 2 Content
Use this when you have multiple sections and want only one visible at a time.

In this example you can close all the sections because the collapsible option is set to true

$("#accordion").accordion({ collapsible: true });

Try it. Click the bar above that says "Section 2"

Section 3

Section 3 Content
Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.

Section 4

Section 4 Content
Thanks for reading all four sections.