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 indicator-icon="happy" header-text="Click me to show some more text"> <p slot="content"> Hello! </p> </spx-accordion>

Hello!

<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 indicator-icon="happy" header-text="Click me to show some more text" reverse> <p slot="content"> Hello! </p> </spx-accordion>

Hello!

Properties

class-content

Type: string

Apply classes to content.

class-content-active

Type: string

Apply classes to content active.

class-content-inactive

Type: string

Apply classes to content inactive.

class-content-text

Type: string

Apply classes to content text.

class-content-text-active

Type: string

Apply classes to content text active.

class-content-text-inactive

Type: string

Apply classes to content text inactive.

class-header

Type: string

Apply classes to header.

class-header-active

Type: string

Apply classes to header active.

class-header-icon

Type: string

Apply classes to header icon.

class-header-icon-active

Type: string

Apply classes to header icon active.

class-header-icon-container

Type: string

Apply classes to header icon container.

class-header-icon-container-active

Type: string

Apply classes to header icon container active.

class-header-icon-container-inactive

Type: string

Apply classes to header icon container inactive.

class-header-icon-inactive

Type: string

Apply classes to header icon inactive.

class-header-inactive

Type: string

Apply classes to header inactive.

class-header-text

Type: string

Apply classes to header text.

class-header-text-active

Type: string

Apply classes to header text active.

class-header-text-inactive

Type: string

Apply classes to header text inactive.

content-color

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

Content color.

content-text

Type: stringDefault: 'Default Content Text'

Content text.

content-text-tag

Type: stringDefault: 'span'

Content text tag.

content-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-accordion-content-transition-duration

Content transition-duration.

content-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-accordion-content-transition-timing-function

Content transition-timing-function.

disable-animation

Type: boolean

Disables the animation. Set this attribute if the accordion is starting hidden in the DOM.

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-accordion-font-size

Component font-size property.

font-size-max

Type: numberDefault: 1.2CSS variable: --spx-accordion-font-size-max

Component font-size-max property.

font-size-min

Type: numberDefault: 1CSS variable: --spx-accordion-font-size-min

Component font-size-min property.

gap

Type: stringDefault: '0.4em'CSS variable: --spx-accordion-gap

Space between header and content.

gap-max

Type: numberDefault: 1.2

gap-min

Type: numberDefault: 1

header-color

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

Header color.

header-gap

Type: stringDefault: '0.4em'CSS variable: --spx-accordion-header-gap

Gap between header text and icon.

header-gap-max

Type: numberDefault: 1

header-gap-min

Type: numberDefault: 0.6

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.

indicator-icon

Type: stringDefault: 'arrow-down'

Indicator icon.

indicator-icon-transform

Type: stringDefault: 'rotate(180deg)'

Indicator icon transform.

indicator-icon-type

Type: stringDefault: 'ionicons'

Indicator icon type.

link

Type: string

Sets the ID to link different accordions together.

link-type

Type: stringChoices: '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: 'default'Choices: '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.

reload

Reload component.

toggle

Toggles the accordion.