@chantelle/accordion

The Accordion component of the Chantelle Pattern Library

Usage no npm install needed!

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

README

Accordion

Installation

yarn add @chantelle/accordion

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/accordion/dist/styles.css">

 import '@chantelle/accordion/dist/styles.css';

React Component

import { Accordion, AccordionItem } from '@chantelle/accordion';

ReactDOM.render(
   <Accordion>
      <AccordionItem title="Section Title One">Hello there</AccordionItem>
      <AccordionItem title="Section Title Two">General Kenobi</AccordionItem>
   </Accordion>,
  container
);

CSS API

To use the Accordion component, add the .pl-accordion to the <div> element to apply the styles. Don't forget add name and id for you Accordion You can you type='checkbox' for standard Accordion and type='radio' and same name for auto fold


<div class="pl-accordion">
    <div class="pl-accordion-item">
      <input  id="myFilterId1" name="myFilter1" type='checkbox' class="pl-accordion-handle"/>
      <label for="myFilterId1" class="pl-accordion-title">Section One</label>
    
      <div class="pl-accordion-content">
        <div class="pl-accordion-wrapper">here text</div>
      </div>
    </div>
    <div class="pl-accordion-item">
      <input  id="myFilterId2" name="myFilter2" type='checkbox' class="pl-accordion-handle"/>
      <label for="myFilterId2" class="pl-accordion-title">Section Two</label>
    
      <div class="pl-accordion-content">
        <div class="pl-accordion-wrapper">here text</div>
      </div>
    </div>
</div>