Accordion

An accordion contains multiple sections that can be expanded and collapsed separately. This can often be seen with FAQ-style content where the user is only interested in one or few sections and not the entire page.

Default options

To create an accordion control, define a <div class="accordion"> element that contains the individual sections. Each section is a <div> element that has two children. First, the section header as content of a <div> element. Second, the actual section content in another <div> element. Initially, all sections are collapsed.

<div class="accordion"> <div> <div>Item 1</div> <div> <p> Section 1 content </p> </div> </div> <div> <div>Item 2</div> <div> <p> Section 2 content </p> </div> </div> ... </div>

Sections can be expanded and collapsed by code. To expand or collapse a specific section, use code like this:

$("#accordion1").accordion.expand(indexOrItem); $("#accordion1").accordion.collapse(indexOrItem);

indexOrItem can be the zero-based index of the section or the section element itself.

To expand or collapse all sections, leave out the parameter for the expand() or collapse() function.

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat vehicula ante, quis ultrices metus ultricies sit amet. Maecenas ornare nunc a est imperdiet, in pulvinar odio porttitor. Ut et velit ante. Suspendisse ut sem auctor, interdum nulla a, pellentesque augue. Maecenas velit quam, ultrices sed blandit eget, pharetra a ligula. Praesent imperdiet sed turpis vitae vehicula. Morbi pretium, nisi eget laoreet finibus, metus ante dapibus nunc, ac consectetur erat est tincidunt turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae urna tempor, dictum tortor id, accumsan tortor. Ut tortor est, finibus nec porttitor a, consectetur et orci. Proin fringilla lacus lorem, quis pellentesque libero fermentum sit amet. Maecenas vel dolor ultricies, sagittis risus vitae, tincidunt magna. Praesent quis congue felis. Morbi varius sapien risus, sed lobortis velit tincidunt ac.

Item 2

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque. Phasellus eu nunc tempus, hendrerit diam vel, porta mauris. Donec sit amet turpis ut sapien dapibus sodales. Nulla in elit ut enim malesuada elementum non quis dui. Donec luctus tincidunt elit nec convallis. Morbi lorem nunc, sollicitudin ac blandit ut, pharetra sed dolor.

Item 3

Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna. Nullam faucibus nisl id convallis euismod. Phasellus massa massa, rhoncus in iaculis ac, blandit a velit. Suspendisse nec justo et enim lobortis porttitor. Nunc eget dui interdum, tristique neque lobortis, fringilla dui. Vestibulum sodales non metus a vehicula. Pellentesque sit amet ornare mauris.

Item 4

Quisque porta nibh justo, iaculis rhoncus mi malesuada nec. Sed commodo lacus vel neque pulvinar ultrices. Nulla finibus ut augue et pellentesque. Nulla sed tempus diam, in semper odio. Sed malesuada volutpat neque vitae dignissim. Praesent sit amet sem porttitor, convallis ex varius, vulputate diam. Vivamus a enim ac velit mattis cursus. Maecenas vestibulum tincidunt eros in vulputate. Pellentesque egestas massa mauris, ac vestibulum orci pulvinar ut. Donec porttitor congue odio, auctor efficitur magna lobortis ut. Sed efficitur sollicitudin leo in lacinia.

Exclusive mode

When the exclusive option is set to true, only a single section can be expanded at any time. It is still possible that all sections are collapsed, though. It is easiest to set the option as data-opt-exclusive HTML attribute with the accordion container element.

Item 1

Item 2

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque.

Item 3

The header background can be removed with the no-background class on the accordion element.

Item 1

Item 2

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque.

Item 3

Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna.

Link support

If a section element has an id HTML attribute, the URL hash is set to the value of the expanded section until it is collapsed. When reloading the page with such a hash name set, the corresponding accordion section is automatically expanded and scrolled to at load time.

Item 1

Item 2

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque.

Item 3

Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna.

If there are fixed elements at the top of the page, scrolling to an item will leave it hidden behind the fixed element. In this case, the scrollOffsetElement option can be set to an element (selector) whose height will be considered when scrolling. The scrollOffset option can be set to a fixed height offset to consider. Both offsets are added. It is easiest to set the options as data-opt-scroll-offset-element and data-opt-scroll-offset HTML attributes with the accordion container element.

Item 1 with scroll offset

Item 2 with scroll offset

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque.

This space is intentionally left blank to demonstrate the linking feature.