Accordion

Available as: Web ComponentShortcodeOxygen Element

The classic method to show and hide elements on your website. Can be used with custom markup for the header and/or content section.

<spx-accordion icon="happy" header-text="Click me to show some more text" content-text="Hello!"> </spx-accordion>
<spx-accordion header-text="Resize the browser window!" styling="fluid" font-size-min="1.5" font-size-max="3"> </spx-accordion>
<style> spx-accordion + spx-accordion { margin-top: 12px; } </style> <spx-accordion indicator-icon="cube" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"></spx-accordion> <spx-accordion indicator-icon="aperture" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"></spx-accordion> <spx-accordion indicator-icon="apps" header-text="Clicking one accordion will close the other ones" link="my-link-id" link-type="close"></spx-accordion>
<style> spx-accordion + spx-accordion { margin-top: 12px; } </style> <spx-accordion indicator-icon="cube" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"></spx-accordion> <spx-accordion indicator-icon="aperture" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"></spx-accordion> <spx-accordion indicator-icon="apps" header-text="Clicking one accordion will toggle the other ones" link="my-link-id" link-type="toggle"></spx-accordion>
<spx-accordion reverse icon="happy" header-text="Click me to show some more text in reverse!" content-text="Hello in reverse!"> </spx-accordion>
<spx-accordion> <p slot="header">I am a custom slot</p> <img slot="content" src="{{ url.examples }}/10.svg" alt=""/> </spx-accordion>

I am a custom slot

<spx-accordion header-text="Style with Tailwind classes! 😲" styling="headless" class-header="flex items-center font-medium text-lg focus-out" class-header-icon-active="transform rotate-180" class-content="mt-4" class-content-inactive="hidden" class-header-text="ml-4"> </spx-accordion>

Properties

class-content

Type: string

class-content-active

Type: string

class-content-inactive

Type: string

class-content-text

Type: string

class-content-text-active

Type: string

class-content-text-inactive

Type: string

class-header

Type: string

class-header-active

Type: string

class-header-icon

Type: string

class-header-icon-active

Type: string

class-header-icon-inactive

Type: string

class-header-inactive

Type: string

class-header-text

Type: string

class-header-text-active

Type: string

class-header-text-inactive

Type: string

content-color

Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-accordion-content-color

content-font-size

Type: stringDefault: var(--spx-font-size)CSS Variable: --spx-accordion-content-font-size

content-font-size-max

Type: numberDefault: 1.2CSS Variable: --spx-accordion-content-font-size-max

content-font-size-min

Type: numberDefault: 1CSS Variable: --spx-accordion-content-font-size-min

content-text

Type: stringDefault: Default Content Text

Content text.

content-text-tag

Type: stringDefault: span

Content text tag.

gap

Type: stringDefault: 0.4emCSS Variable: --spx-accordion-gap

Space between header and content.

gap-max

Type: numberDefault: 1.2CSS Variable: --spx-accordion-gap-max

gap-min

Type: numberDefault: 1CSS Variable: --spx-accordion-gap-min

header-color

Type: stringDefault: var(--spx-color-gray-900)CSS Variable: --spx-accordion-header-color

header-font-size

Type: stringDefault: var(--spx-font-size)CSS Variable: --spx-accordion-header-font-size

header-font-size-max

Type: numberDefault: 1.2CSS Variable: --spx-accordion-header-font-size-max

header-font-size-min

Type: numberDefault: 1CSS Variable: --spx-accordion-header-font-size-min

header-gap

Type: stringDefault: 0.4emCSS Variable: --spx-accordion-header-gap

Gap between header text and icon.

header-gap-max

Type: numberDefault: 1CSS Variable: --spx-accordion-header-gap-max

header-gap-min

Type: numberDefault: 0.6CSS Variable: --spx-accordion-header-gap-min

header-text

Type: stringDefault: Default Header Text

Header text.

header-text-open

Type: string

Header text when component is closed.

header-text-tag

Type: stringDefault: span

Header text tag.

icon

Type: stringDefault: arrow-down

Icon.

icon-transform

Type: stringDefault: rotate(180deg)CSS Variable: --spx-accordion-icon-transform

Icon transform.

icon-type

Type: stringDefault: ionicons

Icon type.

link

Type: string

Sets the ID to link different accordions together.

link-type

Type: stringDefault: openChoices: open, close, toggle

Sets the type of link.

open-state

Type: booleanDefault: false

State of accordion.

reverse

Type: boolean

Reverse icon positioning.

styling

Type: stringDefault: defaultChoices: default, fluid, headless

Styling.

Slots

content

Slot for the content.

header

Slot for the header.

Events

spxAccordionDidLoad

Fires after component has loaded.

Methods

close

Closes the accordion.

open

Opens the accordion.

toggle

Toggles the accordion.