Yeti

# Collapse

# Demo

Demo

# Collapse

# Usage

<Button className="uppercase" onClick={toggleFirstCollapse}>
  Toggle Collapse
</Button>
<Collapse open={firstCollapse}>
  <div className="border border-divider rounded-xl mt-5 p-5">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
    accusamus porro eos soluta! Debitis ab quis nam sed, dolorum dolore illum
    qui iure eius voluptatum nemo accusamus blanditiis neque id.
  </div>
</Collapse>

# Props

Property Type Default Required Description
open boolean no Is Collapse Open

# Accordion

# Usage

<Accordion>
  <AccordionItem
    activeIndex={activeIndex}
    index={1}
    title="Accordion Title #1"
    onToggle={setActiveIndex}
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam iure rem sed
    dicta ut a perspiciatis temporibus! Repudiandae quidem eaque unde culpa
    molestias neque dolores assumenda magnam, ut doloremque iste.
  </AccordionItem>
  <hr />
  <AccordionItem
    activeIndex={activeIndex}
    index={2}
    title="Accordion Title #2"
    onToggle={setActiveIndex}
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam iure rem sed
    dicta ut a perspiciatis temporibus! Repudiandae quidem eaque unde culpa
    molestias neque dolores assumenda magnam, ut doloremque iste.
  </AccordionItem>
  <hr />
  <AccordionItem
    activeIndex={activeIndex}
    index={3}
    title="Accordion Title #3"
    onToggle={setActiveIndex}
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam iure rem sed
    dicta ut a perspiciatis temporibus! Repudiandae quidem eaque unde culpa
    molestias neque dolores assumenda magnam, ut doloremque iste.
  </AccordionItem>
</Accordion>

# Props

# AccordionItem

Property Type Default Required Description
activeIndex number no Index of active accordion
index number no Index of the item
title string no Title of the accordion
onToggle function no Callback function when the accordion item is toggled

← Dropdowns →