@ciceksepeti/cui-accordion

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. See w3

Installing

Using Npm:

$ npm install @ciceksepeti/cui-accordion

Using Yarn:

$ yarn add @ciceksepeti/cui-accordion

Example

import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from "@ciceksepeti/cui-accordion";

function Demo() {
  return (
    <Accordion>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
    </Accordion>
  );
}