Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Accordion

Description

The Accordion is a component that allows for the creation of a collection of panels arranged in an accordion on a page.

Authoring

The Accordion component allows for the creation of a collection of components, composed as panels, and arranged in an accordion on a page, similar to the Tabs component, but allows for expanding and collapsing of the panels.

Adding the accordion to your page

  • Accordions should be added to your page by placing them into their own container.

Configuring the Items tab

  • Add as many items as needed, where each item will take up one panel.
  • Adding a Container will give you the flexibility to add additional components and adjust their layout.
  • The name for each item will be displayed as the panel title.

Configuring the Properties tab

  • Enable single expansion if only one panel should be expanded at a time.
  • Configure items to be opened upon page load, if any.
  • Configure the panel title heading style. Select from H2 to H6.
  • Configure the exand all and collapse all label. If left empty, those options will not show.

Selecting a panel

  • Use the select panel option on the component toolbar to change to a different panel for editing as well as to easily rearrange the order of the panels within the accordion.
  • Tapping or clicking an entry in the dropdown, switches the view in the editor to that panel.

Examples

Default - Closed Upon Page Load

Content for Accordion 1.

Content for Accordion 2.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 1 Opened Upon Page Load

Content for Accordion 1. This accordion open by default.

Content for Accordion 2.

Tab 1 and 2 Opened Upon Page Load

Content for Accordion 1. This accordion open by default

Content for Accordion 2. This accordion also open by default.

Accordions In Accordions

Content for Accordion 1. This accordion set to be open initially.

Content for Accordion 1a. This accordion set to be open initially.

Content for Accordion 1b.

Content for Accordion 2.

Content for Accordion 2a.

Content for Accordion 2b.

Content for Accordion 3.

Content for Accordion 3a.

Content for Accordion 3b.

Accordions In Accordions - Single Expansion

Content for Accordion 1. This accordion set to be open initially.

Content for Accordion 1a. This accordion set to be open initially.

Content for Accordion 1b.

Content for Accordion 2.

Content for Accordion 2a.

Content for Accordion 2b.

Content for Accordion 3.

Content for Accordion 3a.

Content for Accordion 3b.