Skip to main content

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
Section One
Section Two
Section Three
Section 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
Section One
Section Two
Section Three
Section 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.

AttributeTypeDefaultDescription
multipleBoolunsetAllows 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.

Here are some basic practices to make sure the accordion you build is accessible.
<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>