Accordion

The EAccordion component is a useful tool for managing and displaying large amounts of data on a webpage. Demo Here

It enables users to hide and display sections of content at a time. Nevertheless, when a multiple prop is used, multiple items can expand until explicitly closed.

Import

import EAccordion from "@components/Elements/EAccordion";
import EAccordionGroup from "@components/Elements/EAccordion/EAccordionGroup";

Usage

The EAccordion and EAccordionGroup components are used together as below:

const AccordionExample = () => {
    return (
        <EAccordionGroup>
            <EAccordion title="Title 1">Accordion 1</EAccordion>
            <EAccordion title="Title 2">Accordion 2</EAccordion>
        </EAccordionGroup>
    );
};

export default AccordionExample;

controlled EAccordion

You can control accordion active state by using value and onChange props.

The type of value is Array. Here's an example:

const AccordionExample = () => {
    const [value, setValue] = useState(0); // Zero based - first accordion is open

    const onClickHandler = (event, value) => {
        setValue(value);
    };

    return (
        <EAccordionGroup value={value} onChange={onClickHandler}>
            <EAccordion title="Title">content 1</EAccordion>
            <EAccordion title="Title">content 2</EAccordion>
        </EAccordionGroup>
    );
};

export default AccordionExample;

Props

For AccordionGroup component, the following props are available:

Prop	Type	Default	Note
value	[Number, Array]	false	Accordion's active prop
multiple	Boolean	false	The multiple property allows more than one item to expand at the same time.
disabled	Boolean	false	Disables the the accordion elements.
className	String	-	Overrides or extends the component's styles.
variant	String	"fill"	The EAccordion elements can be represented in two ways: fill and outline.
color	String	"dark_theme-100"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
square	Boolean	false	Removes rounded corners of the element.

For EAccordion component, the following props are available:

Prop	Type	Default	Note
variant	String	"fill"	The EAccordion elements can be represented in two ways: fill and outline.
prependIcon	Object	-	Inserts a custom EIcon element to the accordion item(s) that is located before the title. More Info here
appendIcon	Object	-	Inserts a custom EIcon element to the accordion item(s) that is located after the title. More Info here
disabled	Boolean	false	Disables the EAccordion element.
color	String	"dark_theme-100"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars scsspage.
square	Boolean	false	Removes rounded corners of the element.
title	[String, node]	-	Adds a title to the EAccordion element.
className	String	-	Overrides or extends the component's styles.

Note

As you can see, the AccordionGroup and EAccordion components share a few properties (disabled, color, outline) which can be used in two ways:

approach 1

<EAccordionGroup color="danger">
    <EAccordion title="Title">
        {/* color:danger */}
        content 1
    </EAccordion>
    <EAccordion title="Title">
        {/* color:danger */}
        content 2
    </EAccordion>
</EAccordionGroup>

approach 2

<EAccordionGroup color="danger">
    <EAccordion title="Title" color="success">
        {/* color:success */}
        content 1
    </EAccordion>
    <EAccordion title="Title">
        {/* color:danger */}
        content 2
    </EAccordion>
</EAccordionGroup>

Callback Functions

The AccordionGroup component contains following callback functions.

Function	Description
onChange	Callback fired when the expand/collapse state is changed. function(event: React.SyntheticEvent, activeItem: [Number,Array]) => void 👇 • event: The event source of the callback. • activeItem: active accordion(s) value.

Children

The EAccordion component provides a children props that enable you to customize the content.

Children	Description
✔️	Component’s content.