Show moreStatusdevelopment

An example pattern for progressive disclosure of content

Guidance

Sometimes there may be a requirement to present users with key pieces of information only, to focus their attention. Additional, more detailed information can be presented to them if they choose to display it. This is known as progessive disclosure.

The pattern below shows how this can be achieved using the StormID toggle component.

Example

Open in a new tab

Dependencies and installation

Package	Installation
@stormid/toggle	`npm i -S @stormid/toggle`

Code

<div class="show-more js-show-more"><h2 class="show-more__heading">Lorem ipsum dolor sit amet</h2><p>Aenean id posuere nunc. Donec diam nisl, rhoncus vel faucibus sed, porttitor sit amet ipsum. Donec at venenatis augue. Phasellus consequat lectus non augue vestibulum, at varius diam sagittis. Morbi nec purus augue. Etiam rutrum ullamcorper arcu vitae sollicitudin. Aliquam bibendum suscipit risus, at lacinia tortor efficitur ac.</p><button type="button" class="btn btn--text show-more__btn js-show-more__toggle js-show-more__btn" aria-expanded="false" aria-controls="more-content" aria-label="Show more about Lorem ipsum dolor sit amet">Show more...</button><div id="more-content" class="show-more__bd js-show-more__block" data-toggle="js-show-more__toggle"><p>Aenean id posuere nunc. Donec diam nisl, <a href="#">rhoncus vel faucibus sed</a>, porttitor sit amet ipsum. Donec at venenatis augue. Phasellus consequat lectus non augue vestibulum, at varius diam sagittis. Morbi nec purus augue. Etiam rutrum ullamcorper arcu vitae sollicitudin. Aliquam bibendum suscipit risus, at lacinia tortor efficitur ac.</p><p>Praesent vitae mi nec mauris vehicula ultricies nec ut felis. Nam vel nisi id nunc efficitur fermentum. Vestibulum mollis enim nec ultrices mattis. Curabitur placerat sed nisl lobortis iaculis. Fusce porttitor massa augue, sit amet faucibus enim finibus nec. Maecenas hendrerit metus in justo commodo viverra.</p></div><button type="button" class="btn btn--text show-more__btn--hide js-show-more__toggle js-show-more__btn-hide" aria-expanded="false" aria-controls="more-content" aria-label="Show less about Lorem ipsum dolor sit amet">...Show less</button></div>

import toggle from '@stormid/toggle';
const SELECTORS = {
    NODE: '.js-show-more',
    BLOCK: '.js-show-more__block',
    MORE_BTN: '.js-show-more__btn',
}

export const showMoreFocus = (isOpen, currentBlock, currentShowMore) => {
    if (isOpen) {
        currentBlock.setAttribute('tabindex', '-1');
        currentBlock.focus();
    } else {
        currentBlock.removeAttribute('tabindex', '-1');
        currentShowMore.focus();
    }
}

export const init = () => {

    const nodes = Array.from(document.querySelectorAll(SELECTORS.NODE));
    const initialised = [];

    nodes.forEach((node) => {
        const currentBlock = node.querySelector(SELECTORS.BLOCK);
        const currentShowMore = node.querySelector(SELECTORS.MORE_BTN);
        if(!currentBlock || !currentShowMore) return;

        const showMoreToggle = toggle(currentBlock, { 
            focus: false, 
            local: true,
            callback: (tog) => showMoreFocus(tog.isOpen, currentBlock, currentShowMore)
        });
        initialised.push(showMoreToggle);
    })

    return initialised;
};

init();

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the expanding section behaves visually and functionally as expected.

For validation in developer tools / web inspector

An HTML
```
<button>
```
element is used to show the section
An HTML
```
<button>
```
element is used to hide the section
An
```
aria-expanded
```
attribute should be present on both
```
<button>
```
elements. The value of this should be 'true' when the section is expanded, and false when the section is collapsed.
Both buttons
```
<button>
```
should have an
```
aria-controls
```
attribute. The value of this should match the ID of the section being shown/hidden.

For visual validation

Section show and hide buttons should have a clearly visible focus style which meets accessibility contrast requirements
Section show/hide buttons should be no less than 44px x 44px in size (unless any of the allowed WCAG exceptions apply)
Show/hide buttons should be appropriately labelled to describe their functionality. If the design requires no visible text, a label should be added as an
```
aria-label
```
attribute on the
```
<button>
```
element
The collapsed content should be hidden visually, hidden from keyboard access, and not read by screen readers
The expanded content should be visible, available for keyboard access, and read by screen readers

For functional validation

Show/hide buttons should be available to be tabbed to and activated via keyboard
When expanded, keyboard focus should continue through the expanded content to any focusable elements within
If content is hidden again after being expanded, focus should return to the 'show' button

UI Patterns