What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Accordion
deprecated v3.0

This component is now deprecated and will be removed/refactored in v3.0

Introduction

The accordion applies JavaScript interactions to expand and collapse elements on the page both in isolation and in relation to other accordion sections. It is configurable, so can be applied to different types of elements.

Please refer to the PF-Accordion component for a more up-to-date implementation.

Examples

Unstyled accordion

Toggle 1
Content 1
Toggle 2
Content 2
<div class="accordion" data-js="accordion" data-accordion-start="first-open" data-accordion-type="open-single">
        <div class="accordion__segment" data-js="accordion-segment">
            <div class="accordion__toggle" data-js="accordion-toggle">Toggle 1</div>
            <div class="accordion__content" data-js="accordion-content">Content 1</div>
        </div>
        <div class="accordion__segment" data-js="accordion-segment">
            <div class="accordion__toggle" data-js="accordion-toggle">Toggle 2</div>
            <div class="accordion__content" data-js="accordion-content">Content 2</div>
        </div>
    </div>

Chrome accordion

Toggle 1
Content 1
Toggle 2
Content 2
<div class="accordion accordion--chrome" data-js="accordion" data-accordion-start="all-closed" data-accordion-type="open-single">
        <div class="accordion__segment accordion__segment--chrome" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome" data-js="accordion-toggle">Toggle 1</div>
            <div class="accordion__content accordion__content--chrome" data-js="accordion-content">Content 1</div>
        </div>
        <div class="accordion__segment accordion__segment--chrome" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome" data-js="accordion-toggle">Toggle 2</div>
            <div class="accordion__content accordion__content--chrome" data-js="accordion-content">Content 2</div>
        </div>
    </div>

Chrome and highlighted accordion

Business development 3 openings
Content 1
Business development 3 openings
Content 2
Business development 3 openings
Content 3
Business development 3 openings
Content 4
<div class="accordion accordion--chrome accordion--highlight" data-js="accordion" data-accordion-start="all-closed" data-accordion-type="open-single">
        <div class="accordion__segment accordion__segment--chrome accordion__segment--highlight" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome accordion__toggle--highlight" data-js="accordion-toggle"><span class="heading heading--4 heeading-cta">Business development <span class="link heading__cta text-small-medium">3 openings</span></span></div>
            <div class="accordion__content accordion__content--chrome accordion__content--highlight" data-js="accordion-content">Content 1</div>
        </div>
        <div class="accordion__segment accordion__segment--chrome accordion__segment--highlight" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome accordion__toggle--highlight" data-js="accordion-toggle"><span class="heading heading--4 heeading-cta">Business development <span class="link heading__cta text-small-medium">3 openings</span></span></div>
            <div class="accordion__content accordion__content--chrome accordion__content--highlight" data-js="accordion-content">Content 2</div>
        </div>
        <div class="accordion__segment accordion__segment--chrome accordion__segment--highlight" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome accordion__toggle--highlight" data-js="accordion-toggle"><span class="heading heading--4 heeading-cta">Business development <span class="link heading__cta text-small-medium">3 openings</span></span></div>
            <div class="accordion__content accordion__content--chrome accordion__content--highlight" data-js="accordion-content">Content 3</div>
        </div>
        <div class="accordion__segment accordion__segment--chrome accordion__segment--highlight" data-js="accordion-segment">
            <div class="accordion__toggle accordion__toggle--chrome accordion__toggle--highlight" data-js="accordion-toggle"><span class="heading heading--4 heeading-cta">Business development <span class="link heading__cta text-small-medium">3 openings</span></span></div>
            <div class="accordion__content accordion__content--chrome accordion__content--highlight" data-js="accordion-content">Content 4</div>
        </div>
    </div>

Dependencies

  • src/html/components/accordion.hbs
  • src/styles/components/blocks/_accordion.scss
  • src/scripts/modules/jquery.pfAccordion.js

Usage

Class/JavaScript Hook Description Required?
.accordion Placed on outer-most tag that will contain the accordion. Required
.accordion__segment Placed on all segments of the accordion that wrap a segment toggle and its expanding or collapsing content. Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below.
.accordion__toggle Placed on the element inside an accordion segment that will expand and collapse the content of that segment when clicked on. Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below.
.accordion__content Placed on the element inside the accordion segment which must expand and collapse. Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below.
.accordion--chrome and accordion__segment|toggle|content--chrome Adds some basic aesthetic styling Optional
.accordion--highlighted and accordion__segment|toggle|content--highlighted Adds slightly more prominent aesthetic styling Optional
[data-js=accordion-segment] Placed on all segments of the accordion that wrap a segment toggle and its expanding or collapsing content. Required, unless the $.pfAccordion.segment property is assigned to another identifier before running $.pfAccordion.init().
[data-js=accordion-toggle] Placed on the element inside an accordion segment that will expand and collapse the content of that segment when clicked on. Required, unless the $.pfAccordion.toggle property is assigned to another identifier before running $.pfAccordion.init().
[data-js=accordion-content] Placed on the element inside the accordion segment which must expand and collapse. Required, unless the $.pfAccordion.content property is assigned to another identifier before running $.pfAccordion.init().