Accordian

100% RSC0kb

Basiclly just collapsible component but we only allow one to be open at a time. Want to have multiple open at the same time? Just use the Collapsible only component instead.

Requirements

You will need the Collapsible component to use this component. You can find it here.

Examples

Simple Accordian Example

Accordian 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordian 2

Accordian 3

Code

import { Collapsible } from '@/components/Collapsible'
import cn from '@/utils/cn'
import { applyPropsToChildrenOfType } from '@/utils/manipulateReactComponents'
import React, { useId } from 'react'

type AccordianProps = {
  children: React.ReactNode
  className?: string
}

const Accordian = ({ children, className }: AccordianProps) => {
  const accordionId = useId()
  const accordianChildren = applyPropsToChildrenOfType(children, { accordionId }, [Collapsible])
  return <div className={cn('block', className)}>{accordianChildren}</div>
}

Accordian.displayName = 'Accordian'

export default Accordian

Usage

<Accordian>
  <Collapsible openByDefault={true}>
    <CollapsibleTrigger className="p-3">
      Accordian 1
    </CollapsibleTrigger>
    <CollapsibleContent className="p-3 pt-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </CollapsibleContent>
  </Collapsible>
  <Collapsible>
    <CollapsibleTrigger className="p-3">
      Accordian 2
    </CollapsibleTrigger>
    <CollapsibleContent className="p-3 pt-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </CollapsibleContent>
  </Collapsible>
  <Collapsible>
    <CollapsibleTrigger className="p-3">
      Accordian 3
    </CollapsibleTrigger>
    <CollapsibleContent className="p-3 pt-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </CollapsibleContent>
  </Collapsible>
</Accordian>