Introduction
The accordion component from Pol-ui 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 React 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 the <Accordion> component from pol-ui:
import { Accordion } from "pol-ui";Default accordion
Use this example of the <Accordion> component and the <Accordion.Panel> and <Accordion.Title> subcomponents to create an accordion with multiple panels.
Default accordion
import { Accordion } from "pol-ui";
import React from "react";
const AccordionComponent = () => {
return (
<Accordion>
<Accordion.Panel>
<Accordion.Title>This is our most basic accordion</Accordion.Title>
<Accordion.Content>
<p>
This content is a div by default, but you can place inside any other component you like, for example, this <p> tag.
</p>
<p>
As we use tailwind, you can style this accordion however you like.
For example, you can add a border to the content.
</p>
<p className="border border-green-400 px-2 py-1 w-fit rounded-xl bg-green-200 mt-2">
You see :)
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title as="h3">
What if I don't like classes in my html
</Accordion.Title>
<Accordion.Content
theme={{
base: "bg-red-200 border border-red-400 p-6",
}}
>
<p>
No problem, you can use the theme prop to style the accordion. You
can also use the theme prop to override the default classes.
</p>
<p className="bg-blue-200 border border-blue-400 px-2 py-1 w-fit rounded-xl mt-2">
This text is blue but the main content is red.
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title>What can I change by props</Accordion.Title>
<Accordion.Content>
<h3 className="mb-4 text-lg first-letter:uppercase">
The main props for the accordion are:
</h3>
<ol className="flex flex-col gap-2 divide-y w-fit">
<li>
<strong>alwaysOpen</strong> - if true, the accordion will always
be open
</li>
<li>
<strong>bordered</strong> - if true, the accordion will have a
border
</li>
<li>
<strong>arrowIcon</strong> - the icon to use for the arrow
</li>
<li>
<strong>collapseAll</strong> - if true, all panels will be closed
</li>
<li>
<strong>theme</strong> - the theme to use for the accordion as we
did above
</li>
</ol>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
);
};
export default AccordionComponent;Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| alwaysOpen | boolean | false | Keep all panels open at the same time |
| bordered | boolean | false | Add a border to the accordion panels |
| arrowIcon | ReactNode | null | Add a custom icon to the accordion panels |
| children | ReactNode | null | The content of the accordion |
| collapseAll | boolean | false | Collapse all panels at the same time |
| theme | AccordionTheme | accordionTheme | The theme of the accordion |
Examples
Always open
By default the accordion will close the other panels when a new panel is opened, but you can use the alwaysOpen prop to keep all panels open at the same time.
Always open example
import { Accordion } from "pol-ui";
import React from "react";
const AccordionComponent = () => {
return (
<Accordion alwaysOpen>
<Accordion.Panel>
<Accordion.Title>This is our most basic accordion</Accordion.Title>
<Accordion.Content>
<p>
This content is a div by default, but you can place inside any other component you like, for example, this <p> tag.
</p>
<p>
As we use tailwind, you can style this accordion however you like.
For example, you can add a border to the content.
</p>
<p className="border border-green-400 px-2 py-1 w-fit rounded-xl bg-green-200 mt-2">
You see :)
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title as="h3">
What if I don't like classes in my html
</Accordion.Title>
<Accordion.Content
theme={{
base: "bg-red-200 border border-red-400 p-6",
}}
>
<p>
No problem, you can use the theme prop to style the accordion. You
can also use the theme prop to override the default classes.
</p>
<p className="bg-blue-200 border border-blue-400 px-2 py-1 w-fit rounded-xl mt-2">
This text is blue but the main content is red.
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title>What can I change by props</Accordion.Title>
<Accordion.Content>
<h3 className="mb-4 text-lg first-letter:uppercase">
The main props for the accordion are:
</h3>
<ol className="flex flex-col gap-2 divide-y w-fit">
<li>
<strong>alwaysOpen</strong> - if true, the accordion will always
be open
</li>
<li>
<strong>bordered</strong> - if true, the accordion will have a
border
</li>
<li>
<strong>arrowIcon</strong> - the icon to use for the arrow
</li>
<li>
<strong>collapseAll</strong> - if true, all panels will be closed
</li>
<li>
<strong>theme</strong> - the theme to use for the accordion as we
did above
</li>
</ol>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
);
};
export default AccordionComponent;Bordered
You can use the bordered prop to add a border to the accordion panels.
Bordered example
import { Accordion } from "pol-ui";
import React from "react";
const AccordionComponent = () => {
return (
<Accordion isBordered>
<Accordion.Panel>
<Accordion.Title>This is our most basic accordion</Accordion.Title>
<Accordion.Content>
<p>
This content is a div by default, but you can place inside any other component you like, for example, this <p> tag.
</p>
<p>
As we use tailwind, you can style this accordion however you like.
For example, you can add a border to the content.
</p>
<p className="border border-green-400 px-2 py-1 w-fit rounded-xl bg-green-200 mt-2">
You see :)
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title as="h3">
What if I don't like classes in my html
</Accordion.Title>
<Accordion.Content
theme={{
base: "bg-red-200 border border-red-400 p-6",
}}
>
<p>
No problem, you can use the theme prop to style the accordion. You
can also use the theme prop to override the default classes.
</p>
<p className="bg-blue-200 border border-blue-400 px-2 py-1 w-fit rounded-xl mt-2">
This text is blue but the main content is red.
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title>What can I change by props</Accordion.Title>
<Accordion.Content>
<h3 className="mb-4 text-lg first-letter:uppercase">
The main props for the accordion are:
</h3>
<ol className="flex flex-col gap-2 divide-y w-fit">
<li>
<strong>alwaysOpen</strong> - if true, the accordion will always
be open
</li>
<li>
<strong>bordered</strong> - if true, the accordion will have a
border
</li>
<li>
<strong>arrowIcon</strong> - the icon to use for the arrow
</li>
<li>
<strong>collapseAll</strong> - if true, all panels will be closed
</li>
<li>
<strong>theme</strong> - the theme to use for the accordion as we
did above
</li>
</ol>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
);
};
export default AccordionComponent;Custom icon
You can use the arrowIcon prop to add a custom icon to the accordion panels.
Always open example
import { Accordion } from "pol-ui";
import React from "react";
const AccordionComponent = () => {
return (
<Accordion arrowIcon={customIcon}>
<Accordion.Panel>
<Accordion.Title>This is our most basic accordion</Accordion.Title>
<Accordion.Content>
<p>
This content is a div by default, but you can place inside any other component you like, for example, this <p> tag.
</p>
<p>
As we use tailwind, you can style this accordion however you like.
For example, you can add a border to the content.
</p>
<p className="border border-green-400 px-2 py-1 w-fit rounded-xl bg-green-200 mt-2">
You see :)
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title as="h3">
What if I don't like classes in my html
</Accordion.Title>
<Accordion.Content
theme={{
base: "bg-red-200 border border-red-400 p-6",
}}
>
<p>
No problem, you can use the theme prop to style the accordion. You
can also use the theme prop to override the default classes.
</p>
<p className="bg-blue-200 border border-blue-400 px-2 py-1 w-fit rounded-xl mt-2">
This text is blue but the main content is red.
</p>
</Accordion.Content>
</Accordion.Panel>
<Accordion.Panel>
<Accordion.Title>What can I change by props</Accordion.Title>
<Accordion.Content>
<h3 className="mb-4 text-lg first-letter:uppercase">
The main props for the accordion are:
</h3>
<ol className="flex flex-col gap-2 divide-y w-fit">
<li>
<strong>alwaysOpen</strong> - if true, the accordion will always
be open
</li>
<li>
<strong>bordered</strong> - if true, the accordion will have a
border
</li>
<li>
<strong>arrowIcon</strong> - the icon to use for the arrow
</li>
<li>
<strong>collapseAll</strong> - if true, all panels will be closed
</li>
<li>
<strong>theme</strong> - the theme to use for the accordion as we
did above
</li>
</ol>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
);
};
export default AccordionComponent;Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface AccordionTheme {
root: {
base: string;
isBordered: IBoolean;
};
content: {
base: string;
};
title: {
arrow: {
base: string;
open: IBoolean;
};
base: string;
isBordered: IBoolean;
heading: string;
open: IBoolean;
};
}