Component: Accordion 1.2

This builder will allow you to generate a custom version of the Accordion component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

accent (attribute)

Color accent used, defaults to blue

width (attribute)

Width of the accordion (should it use the containing controller or break to full width)

limit (attribute)

Whether or not it limits the number of open items to a single item

buttons (attribute)

Whether or not it displays buttons for expand and collapse all

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-accordion--margin

Margin of the main accordion

--ilw-accordion--accent

Accent color of the main accordion

--ilw-accordion-panel--image-transform

Transform of the chevron when not expanded

--ilw-accordion-panel--image-transform-expand

Transform of the chevron when expanded

--ilw-accordion-panel--margin

Margin of the panel

--ilw-accordion-panel--padding

Padding of the panel content (the information below the header)

--ilw-accordion-panel--header-padding

Padding of the header panel (the header section)

--ilw-accordion-panel--section-margin

Margin of the entire section (including the header)

--ilw-accordion-panel--expanded--section-margin

Margin of the entire section (including the header) when expanded

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.