Accordion Standard

Displays collapsible content panels for presenting information in a limited amount of space.

Note: The accordion functionality may not be inherently mobile-friendly depending on device. Use with discretion.

CSS Style Overview

accordion
accordion-scroll
accordion-solo
accordion-scroll-solo
accordion-form
* slim

OmniUpdate users can simply place one of the accordion styles in the page properties where they want to use it. The page will render correctly automatically when you publish or preview it.

* Slim style is an optional class that can be used with any of the accordion styles. It will simply reduce the overall appearance of the accordion.

CSS Style

accordion

ACCORDION

This will automatically close other non-solo boxes when viewing each section.

Example: accordion #1

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Example: accordion #2

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

List item one
List item two
List item three

CSS Style

accordion-scroll

Accordion Scoll

This style will automatically close other non-solo boxes but will also only expand to 300px and content within will scroll.

Example: accordion-scroll #1

This example uses a longer content so you can see how it will scroll within the box

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Example: accordion-scroll #2

We highly recommend using limited text so your user doesn't have to scroll through content.

CSS Style

accordion-solo

ACCORDION SOLO

You can see how the style expands the boxes independently of each other.

Example: accordion-solo #1

Example: accordion-solo #2

CSS Style

accordion-scroll-solo

ACCORDION SCROLL SOLO

You can see how the scroll expands the boxes independently of each other.

Example: accordion-scroll-solo #1

Example: accordion-scroll-solo #2

CSS Style

accordion-form

ACCORDION FORM

Input fields will cause a normal accordion to collapse when you click on them. The accordion-form style will only collapse if a user clicks on the header (h3) of the section.

Example: accordion-form

The form below was crafted in the HTML editor. Please contact your site administrator for propper form creation to ensure ATI complicany.

Example Form 1: User Information

First Name:

Last Name:

Example Form 1: Favorite Foods

Beverage:

Snacks / Candy:

CSS Style

<accordion format> slim

Slim (optional)

Adding "slim" to your css style will shrink font size and padding to decrease the amount of space a normal accordion will use. This is helpful if you have a long list of accordion boxes together.

Accordion Standard

CSS Style Overview

CSS Style

ACCORDION

Example: accordion #1

Example: accordion #2

CSS Style

Accordion Scoll

Example: accordion-scroll #1

Example: accordion-scroll #2

CSS Style

ACCORDION SOLO

Example: accordion-solo #1

Example: accordion-solo #2

CSS Style

ACCORDION SCROLL SOLO

Example: accordion-scroll-solo #1

Example: accordion-scroll-solo #2

CSS Style

ACCORDION FORM

Example: accordion-form

CSS Style

Slim (optional)

Example: accordion-solo with slim

Web Accessibility