@chantelle/pl-accordion v1.1.3

Accordion

Installation

yarn add @chantelle/pl-accordion

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/pl-accordion/build/css/main.css">

 import '@chantelle/pl-accordion/build/css/main.css';

React Component

import { Accordion, AccordionItem } from '@chantelle/pl-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>