Accordion

List of toggleable contents hidden behind headers

Manage and present large amounts of content in a compact and organized manner. Use accordions for organized content, FAQ elements, or presenting product information.

Preview

We provide 30 days of support.
Yes!
Hopefully.

---
import { Accordion } from 'webcoreui/astro'
---

<Accordion items={[{
    title: 'What is Webcore?',
    content: 'Webcore is an open-source, customizable UI component library for Astro, Svelte, and React.'
}, {
    title: 'How can I start using Webcore?',
    content: 'Run <code>npm i webcoreui</code> in your terminal to install the package.'
}, {
    title: 'Is there anything else I need to know?',
    content: 'Yes! There\'s plenty of information in the documentation.'
}]} />

<script>
    import { Accordion } from 'webcoreui/svelte'
</script>

<Accordion items={[{
    title: 'What is Webcore?',
    content: 'Webcore is an open-source, customizable UI component library for Astro, Svelte, and React.'
}, {
    title: 'How can I start using Webcore?',
    content: 'Run <code>npm i webcoreui</code> in your terminal to install the package.'
}, {
    title: 'Is there anything else I need to know?',
    content: 'Yes! There\'s plenty of information in the documentation.'
}]} />

import React from 'react'
import { Accordion } from 'webcoreui/react'

const Component = () => (
    <Accordion items={[{
        title: 'What is Webcore?',
        content: 'Webcore is an open-source, customizable UI component library for Astro, Svelte, and React.'
    }, {
        title: 'How can I start using Webcore?',
        content: 'Run <code>npm i webcoreui</code> in your terminal to install the package.'
    }, {
        title: 'Is there anything else I need to know?',
        content: 'Yes! There\'s plenty of information in the documentation.'
    }]} />
)

export default Component

Accordion components expect a single items prop in the form of an array of objects to set accordion elements. You can use HTML tags in the content property to format your content.

Accordion Icons

By default, the Accordion component uses chevron icons. This can be changed to a plus icon using the icon prop, or can be removed entirely:

Default

We provide 30 days of support.
Yes!
Hopefully.

Plus icon

We provide 30 days of support.
Yes!
Hopefully.

No icon

We provide 30 days of support.
Yes!
Hopefully.

<Accordion items={[ ... ]} icon="plus" />

<Accordion items={[ ... ]} icon="none" />

Reverse and Alternating Layout

You can also change the order of the icon and title with the reverse and item.reverse props to create different layouts:

Reverse layout

We provide 30 days of support.
Yes!
Hopefully.

Alternating layout

We provide 30 days of support.
Yes!
Hopefully.

<Accordion
    items={[ ... ]}
    icon="plus"
    reverse={true}
/>

<Accordion
    items={[{
        title: 'What is Webcore?',
        content: '...'
    }, {
        title: 'How can I start using Webcore?',
        content: '...',
        reverse: true
    }, {
        title: 'Is there anything else I need to know?',
        content: '...'
    }]}
    icon="plus"
/>

API

type AccordionProps = {
    items: {
        title: string
        content: string
        reverse?: boolean
    }[]
    icon?: 'plus' | 'none'
    reverse?: boolean
    className?: string
}

Prop	Purpose
`items.title`	Sets the title of the accordion.
`items.content`	Sets the content related to the title. Pass HTML along with your string to render HTML.
`items.reverse`	Changes the order of the title and the icon.
`icon`	Sets the icon. Uses a chevron by default, which can be changed to a plus sign or no icon.
`reverse`	Changes the order of the title and the icon for all items.
`className`	Pass additional CSS classes for the component.

<- CLI Alert ->

Request improvement for this page