PF-Accordion

ready

Introduction

CSS-only and accessible implementation of UIF Accordion components

Leverages the HTML5 details and summary elements to drive behaviour.

NOTE: This is a dependency free version of the .accordion component that requires JavaScript, but does mean the 'only one pane visible' implementation is lost.

Examples

Basic accordion

  <details open class="pf-accordion">
    <summary>Details #1</summary>
    <ol><li>Item 1.1</li><li>Item 1.2</li></ol><p>Paragraph</p>
    </details>
  <details class="pf-accordion">
    <summary>Details #2</summary>
    <ol><li>Item 2.1</li><li>Item 2.2</li><li>Item 2.3</li><li>Item 2.4</li></ol>
    </details>
  <details class="pf-accordion">
    <summary>Details #3</summary>
    <ol><li>Item 3.1</li><li>Item 3.2</li><li>Item 3.3</li><li>Item 3.4</li></ol>
    </details>

Boxed accordion

  <details class="pf-accordion pf-accordion--boxed">
    <summary>Details #1</summary>
    <ol><li>Item 1.1</li><li>Item 1.2</li></ol><p>Paragraph</p>
    </details>
  <details class="pf-accordion pf-accordion--boxed">
    <summary>Details #2</summary>
    <ol><li>Item 2.1</li><li>Item 2.2</li><li>Item 2.3</li><li>Item 2.4</li></ol>
    </details>
  <details class="pf-accordion pf-accordion--boxed">
    <summary>Details #3</summary>
    <ol><li>Item 3.1</li><li>Item 3.2</li><li>Item 3.3</li><li>Item 3.4</li></ol>
    </details>

Dependencies

• src/styles/components/blocks/_pf-accordion.scss

Usage