Navigation

Accordion

A list of headings that open to show their content. Good for questions and answers.

One open at a time

With data-single, opening an item closes the others. data-open marks the item that is open at the start.

Yes. One license covers every project you build, for yourself and for clients.

No. It is plain HTML, CSS and JavaScript, so it works with any site or framework.

Change a few CSS variables. The guide lists them.

HTML

<div class="pw-accordion" data-pw-accordion data-single>
  <div class="pw-accordion-item" data-open>
    <h3><button class="pw-accordion-trigger">Can I use it in client projects?</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">Yes. One license covers every project you build, for yourself and for clients.</div></div>
  </div>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">Does it need a framework?</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">No. It is plain HTML, CSS and JavaScript, so it works with any site or framework.</div></div>
  </div>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">How do I change the colours?</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">Change a few CSS variables. The guide lists them.</div></div>
  </div>
</div>

Separate cards, several open

Orders leave our warehouse within one working day.

Send it back within 30 days for a full refund.

HTML

<div class="pw-accordion pw-accordion--cards" data-pw-accordion>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">Shipping</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">Orders leave our warehouse within one working day.</div></div>
  </div>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">Returns</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">Send it back within 30 days for a full refund.</div></div>
  </div>
</div>

Lines only

The lamp, a 2 m cable and a wall plug.

Any E27 bulb up to 40 W.

HTML

<div class="pw-accordion pw-accordion--plain" data-pw-accordion>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">What is in the box?</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">The lamp, a 2 m cable and a wall plug.</div></div>
  </div>
  <div class="pw-accordion-item">
    <h3><button class="pw-accordion-trigger">Which bulb fits?</button></h3>
    <div class="pw-accordion-panel"><div class="pw-accordion-body">Any E27 bulb up to 40 W.</div></div>
  </div>
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-single`		Only one item is open at a time.
`data-open`		On an item: open at the start.

Classes

Class	What it does
`pw-accordion--cards`	Each item is its own card.
`pw-accordion--plain`	No box, only lines between items.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:open`	On the item, before it opens. Can be stopped.
`pw:close`	On the item, before it closes. Can be stopped.

From your script

var a = Partwise.get(accordionElement, 'accordion');
a.open(0); a.close(0); a.toggle(1);   // by number, or by a selector
a.openAll(); a.closeAll();

Keyboard

Key	Action
`Enter` `Space`	Open or close the item
`Down` `Up`	Next and previous heading
`Home` `End`	First and last heading

Good to know

Use the heading level that fits your page (h2 to h6) around each button.
An item with an id opens when the page is loaded with that id in the address, like page.html#returns.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/10-accordion.css, js/10-accordion.js.