@chantelle/pl-accordion
v1.1.3
Published
The Accordion component of the Chantelle Pattern Library
Downloads
7
Readme
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>