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

Webcore is an open-source, customizable UI component library for Astro, Svelte, and React.
Run npm i webcoreui in your terminal to install the library.
Yes! There's plenty of information in the documentation.

---
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.

API

type AccordionProps = {
    items: {
        title: string
        content: 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.

<- CLI Alert ->

Request improvement for this page