@ausbom/accordion

Accordions have a top and bottom border with the ability to have interchangable text sizes. The accordion border colour can be changed as required. When an accordion is opened, and another item is clicked on, the original accordion item stays open.

Usage no npm install needed!

<script type="module">
  import ausbomAccordion from 'https://cdn.skypack.dev/@ausbom/accordion';
</script>

README

@ausbom/accordion

Accordions have a top and bottom border with the ability to have interchangable text sizes. The accordion border colour can be changed as required. When an accordion is opened, and another item is clicked on, the original accordion item stays open.

Installation

npm install @ausbom/accordion

Usage

import Accordion, { AccordionItem } from '@ausbom/accordion'
import React from 'react'

<Accordion>
  <AccordionItem id="accordion-1" title="Lorem ipsum dolor">
    accordion-1 content
  </AccordionItem>
  <AccordionItem
    id="accordion-2"
    isOpen
    title="Lorem ipsum dolor sit amet"
  >
     accordion-2 content
  </AccordionItem>
  <AccordionItem id="accordion-3" title="Lorem ipsum">
     accordion-3 content
  </AccordionItem>
  <AccordionItem id="accordion-4" title="Lorem ipsum dolor">
     accordion-4 content
  </AccordionItem>
  <AccordionItem id="accordion-5" title="Lorem ipsum dolor" subTitle="Lorem ipsum sub title">
     accordion-5 content
  </AccordionItem>
</Accordion>