Qwik accordion - Flowbite
Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from Qwik and Tailwind CSS
The accordion component from Flowbite Qwik can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.
The reactivity and state is handled by Qwik and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.
To use the accordion component, you need to import it from flowbite-qwik :
import { Accordion } from "flowbite-qwik"
Default accordion
Use this example to basic accordion.
tsx
import { component$ } from '@builder.io/qwik'
import { Accordion, Link } from 'flowbite-qwik'
export default component$(() => {
return (
<Accordion>
<Accordion.Panel>
<Accordion.Header>Accordion 1</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 2</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 3</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
)
})
Always open accordion
Always open prop to makes accordion able to open multiple elements.
tsx
import { component$ } from '@builder.io/qwik'
import { Accordion, Link } from 'flowbite-qwik'
export default component$(() => {
return (
<Accordion alwaysOpen>
<Accordion.Panel>
<Accordion.Header>Accordion 1</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 2</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 3</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
)
})
Flush accordion
Flush prop removes background color, side borders, and rounded corners
tsx
import { component$ } from '@builder.io/qwik'
import { Accordion, Link } from 'flowbite-qwik'
export default component$(() => {
return (
<Accordion flush>
<Accordion.Panel>
<Accordion.Header>Accordion 1</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 2</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 3</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
)
})
Closed first accordion
First item is not open by default
tsx
import { component$ } from '@builder.io/qwik'
import { Accordion, Link } from 'flowbite-qwik'
export default component$(() => {
return (
<Accordion openFirstItem={false}>
<Accordion.Panel>
<Accordion.Header>Accordion 1</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 2</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 3</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
)
})
Styling accordion
You can style accordion content and headers by passing tailwind classes into them or use a theme.
tsx
import { component$ } from '@builder.io/qwik'
import { Accordion, Link } from 'flowbite-qwik'
export default component$(() => {
return (
<Accordion theme={{ header: { button: 'py-2' } }}>
<Accordion.Panel>
<Accordion.Header>Accordion 1</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">Accordion 2</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Header>Accordion 3</Accordion.Header>
<Accordion.Content>
<div>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars,
and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to <Link href="/docs/getting-started/introduction/">get started</Link> and start developing websites
even faster with components on top of Tailwind CSS.
</p>
</div>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
)
})