Accordion
Installation​
For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.
CDN​
<script src="https://unpkg.com/@pearson-ux/accordion"></script>
NPM​
npm i @pearson-ux/accordion --save
Demo​
Standard​
- Button One
- Button Two
- Button Three
- Button Four
<pearson-accordion>
<ul slot="buttons">
<li>Button One</li>
<li>Button Two</li>
<li>Button Three</li>
<li>Button Four</li>
</ul>
<div class="panels" slot="panels">
<div class="panel">Section One</div>
<div class="panel">Section Two</div>
<div class="panel">Section Three</div>
<div class="panel">Section Four</div>
</div>
</pearson-accordion>
Multiple​
Adding the multiple attribute, allows multiple panels to be displayed at the same time.
- Button One
- Button Two
- Button Three
- Button Four
<pearson-accordion multiple>
<!-- content markup -->
</pearson-accordion >
Structure​
Follow these steps to successfully build out the accordion.
The first child must be a ul
tag with the attribute and value slot="buttons"
. The second child is a div
with the following attributes class="panels" slot="panels"
<pearson-accordion>
<ul slot="buttons"></ul>
<div class="panels" slot="panels"></div>
<pearson-accordion>
The children of the ul
are standard li
tags. Each li
tag will generate a button
. Each button
will open the panel that falls in the same order in the panel list. For example. The first li button
, will open up the first panel div
with content of section one. Button two opens up Section Two, etc....
<pearson-accordion multiple>
<ul slot="buttons">
<li>Button One</li>
</ul>
<div class="panels" slot="panels">
<div class="panel">Section One</div>
</div>
</pearson-accordion>
While you are using the li
tag to generate the buttons, the web component will regenerate the markup so it's accessible and semantic.
Important note: You can add any additional markup you want in between
<div class="panel">TEXT OR MARKUP GOES HERE</div>
API​
All these attributes are optional.
Attribute | Type | Default | Description |
---|---|---|---|
multiple | Bool | unset | Allows multiple panels to be displayed at the same time. |
Events​
There are no events that get emitted.
CSS Theming​
Do you want to customize the look of your login form? You'll need to be familar with SCSS and use your own compiler, but you can download the theme scss files here.
The best way to theme is to change the mixins and variable values. To add the theme to your project, link up the compiled style.css file in the head of your HTML file or import it into your react application.
HTML Markup​
Do you want to use your own JS to make the accordion function? No problem, use the markup below along with CSS to build an accordion with your own JS.
<div id="accordionGroup" class="accordion">
<h3>
<button aria-expanded="false" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="accordion-title">
<span>Section 1</span>
<svg focusable="false" class="icon-18 expand" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-18"></use>
</svg>
<svg focusable="false" class="icon-18 collapse" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#collapse-18"></use>
</svg>
</span>
</button>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel animateIn">
<div>
<!-- Variable content within section, may include any type of markup or interactive widgets. -->
<p>section 1 content</p>
</div>
</div>
<h3>
<button aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion1id2">
<span class="accordion-title">
<span>Section 2</span>
<svg focusable="false" class="icon-18 expand" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-18"></use>
</svg>
<svg focusable="false" class="icon-18 collapse" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#collapse-18"></use>
</svg>
</span>
</button>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion1id2" class="accordion-panel animateIn">
<div>
<!-- Variable content within section, may include any type of markup or interactive widgets. -->
<p>section 2 content</p>
</div>
</div>
<h3>
<button aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion1id3">
<span class="accordion-title">
<span>Section 3</span>
<svg focusable="false" class="icon-18 expand" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-18"></use>
</svg>
<svg focusable="false" class="icon-18 collapse" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#collapse-18"></use>
</svg>
</span>
</button>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion1id3" class="accordion-panel animateIn">
<div>
<!-- Variable content within section, may include any type of markup or interactive widgets. -->
<p>section 3 content</p>
</div>
</div>
</div>