Components

Accordion

Build vertically collapsing accordions.

Requires JS

Note that this component requires use our javascript file to works, else you can skip this message if you are already using Perfect UI as a package.

Basic

To create accordions, simply add the `.accordion` class to the `details` parent element.

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Bordered

To create bordered accordions, simply add the `.accordion-bordered` class.

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accented

To create accented accordions when opened, simply add the `.accordion-accented` class.

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Nested

To create nested accordions, simply add the `.accordion` element inside the `article` of another.

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

For basic accordions you can use the `.accordion-aligned` class to align the arrows to the right.

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

Accordion #1

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

You can mix the variants to create complex accordions.

Accordion #1

This is the body of the accordion item. It is hidden by defaultuntil you expand it with a click.

Accordion #2

Accordion #1

This is the body of the accordion item. It is hidden bdefault, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden bdefault, until you expand it with a click.

Accordion #2

This is the body of the accordion item. It is hidden by default, untiyou expand it with a click.

Custom Arrow

To create accordions with custom arrows, simply create an element with the class `.accordion-icon` inside `summary`.

To define a custom arrow when the accordion is `open`, simply create an element with `.accordion-icon.open` class.

If you leave the element empty, there will be no arrow.

# Custom arrow

This is the body of the accordion item. It is hidden by default, until you expand it with a click.

# Empty arrow

This is the body of the accordion item. It is hidden by default, until you expand it with a click.