Accordion

Quick start

Here is a quick start guide to get started with the Accordion component

Importing Component

import {
  Accordion,
  AccordionSummary,
  AccordionContent,
  AccordionGroup
} from "@hover-design/react";

Code Snippets and Examples

Accordion Default

The Accordion makes use of Accordion, AccordionSummary, and AccordionContent components to create an accordion.

It renders a details element and summary element for the best semantic structure

<Accordion>
  <AccordionSummary>This is summary</AccordionSummary>
  <AccordionContent>Hello</AccordionContent>
</Accordion>

I am Accordion Summary

I am Accordion Content

Accordion Group

Use this to give required styles for accordion.

<AccordionGroup>
  <Accordion>
    <AccordionSummary>Tab Navigate Me!</AccordionSummary>
    <AccordionContent>
      <div>I have awesome accessibility</div>
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionSummary>You will love tabbing me!</AccordionSummary>
    <AccordionContent>
      <input type="checkbox" /> I am checkbox 1
      <input type="checkbox" /> I am checkbox 2
      <input type="checkbox" /> I am checkbox 3
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionSummary>This is summary</AccordionSummary>
    <AccordionContent>
      <div>Hello</div>
    </AccordionContent>
  </Accordion>
</AccordionGroup>

Tab Navigate Me!

I have awesome accessibility

You will love tabbing me!

I am checkbox 1 I am checkbox 2 I am checkbox 3

This is summary

Hello

Accordion Icon Position

Specify the position of the icon in the accordion summary. Defaults to right

<Accordion>
  <AccordionSummary iconPosition="left">This is summary</AccordionSummary>
  <AccordionContent>
    <div>Hello</div>
  </AccordionContent>
</Accordion>

This is summary

Hello

Accordion Custom Icon

<Accordion>
  <AccordionSummary Icon={<>☝️</>} iconPosition="right">
    This is summary
  </AccordionSummary>
  <AccordionContent>
    <div>Hello</div>
  </AccordionContent>
</Accordion>

This is summary

☝️

Hello

Accordion Icon Transition and Animation

<Accordion>
  <AccordionSummary
    Icon={<>+</>}
    iconTransform={"rotate(45deg)"}
    iconTransition={"transform 0.5s"}
    iconPosition="right"
  >
    This is summary
  </AccordionSummary>
  <AccordionContent>
    <div>Hello</div>
  </AccordionContent>
</Accordion>

This is summary

+

Hello

Accordion Advanced usage

The accordion allows for really flexible usage

const [open, setOpen] = useState(false);
.
.
<div>
  <Accordion
    onToggle={(e) => {
      setOpen(e.target.open);
    }}
    open={open}
  >
    <AccordionSummary>This is summary</AccordionSummary>
    <AccordionContent>Hello</AccordionContent>
  </Accordion>
  <Flex gap={"12px"} justifyContent={"space-between"}>
    <Switch
      status={open}
      onChange={() => {
        setOpen((prevValue) => !prevValue);
      }}
    />
    <p>Accordion is {open ? "open" : "closed"}</p>
  </Flex>
</div>

This is summary

Hello

Accordion is closed

Props Reference

Accordion

Accordion also accepts native <details> element props. Reference

Attributes	Values	Default Value	Optional ?
open	true , false	false	Yes
onToggle	React OnToggle Handler	-	Yes

AccordionSummary

AccordionSummary also accepts native <summary> element props. Reference

Attributes	Values	Default Value	Optional ?
Icon	React.ReactNode	undefined	Yes
iconPosition	'left' , 'right'	'right'	Yes
iconTransform	string	'rotate(180deg)'	Yes
iconTransition	string	'transform 0.2s ease-in-out'	Yes

AccordionContent

AccordionContent accepts native <div> element props. Reference

AccordionGroup

AccordionGroup accepts native <div> element props. Reference