- Taxonomic name: M-SHOWHIDE
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.8.0 (15/06/21)
Show/hide
Show / hide controls can be used to progressively reveal content and can reduce scrolling on content-rich pages, or help users to scan for information within restricted spaces such as mobile viewports.
Design and usage
- Show / hide sections should be closed as a default view.
- Generally, an accordion style should be used, where the opening of one section closes another.
- On mobile screens all show/hide sections behave as accordions.
- Do not use when the user needs to see all information within the same view, for example when making comparisons.
- Show / hides should not be used for large sections of content – this can quickly become disorientating for users, particularly in a mobile view.
- Do not use show / hides nested within show / hides, as this can be very disorientating for users.
- Show / hides must not be used on dark accent colours.
Examples
Standard
Interactive example
Code example
<div class="m-showhide" data-module="m-showhide" data-module-load="true">
<h2 class="a-heading a-heading--2 a-heading--light m-showhide__heading">...</h2>
<div class="m-showhide__content">
...
</div>
...
</div>Accordion
Interactive example
Code example
<div class="m-showhide" data-module="m-showhide" data-module-load="true" data-accordion="true">
<h2 class="a-heading a-heading--2 a-heading--light m-showhide__heading">...</h2>
<div class="m-showhide__content">
...
</div>
...
</div>Transcript
Interactive example
Code example
<div class="m-showhide m-showhide--transcript" data-module="m-showhide" data-module-load="true">
<h2 class="a-heading a-heading--2 a-heading--light m-showhide__heading">...</h2>
<div class="m-showhide__content">
...
</div>
...
</div>Development and test
Notes for developers
By default all show/hide sections will be closed on page load. This can be changed if required by applying js-m-showhide-open to any m-showhide__heading.
An ID can be added to any of the .m-showhide__heading elements so that sections can be linked too and automatically opened. If a .m-showhide__heading has an ID set, the ID used for the associated content will be based on the heading's ID.
Printing
It is possible to force the printing of all show/hide sections through the use of the modifier class m-showhide--print. This should only ever be used to satisfy legal requirements for all information to be available when printed. The use of this feature should always be challenged, as if the content if legally important, it should probably not be hidden within show/hide sections in the first place.
Controling show/hides programatically
Show/hide controls can be controlled programatically to open, open all, close and close all controls within a group.
| Method | Description |
|---|---|
open( '#headingId' ) |
Open the section associated with the heading ID provided. This will not open any parent show/hide section and will not scroll the section into view. |
open( '#headingId', true ) |
Open the section associated with the heading ID provided. Any parent show/hide sections will be opened and the section will be scrolled into view. |
openAll() |
Open all show/hide sections for this component only unless it is an accordion where it will ignore this request. |
close( '#headingId' ) |
Close the section with the associated heading ID provided. |
closeAll() |
Close all show/hide sections for this component only. |
For example:
document.addEventListener( 'frameworkready', function () {
FRAMEWORK.require([ 'blocks/m-showhide' ], function ( mShowhideModule ) {
var mShowhideEl = document.querySelector( '#showhideId' ),
mShowhideInstance = mShowhideModule.initInstance( mShowhideEl ); mShowhideInstance.open( '#showhideHeadingId', true );
});
});Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Ensure that when hovering over a link the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
- Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
- Use a screen reader to confirm that the links are understandable.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-showhide |
Base style for a show/hide section | Yes | div |
|
.m-showhide--print |
Modifier to force the print of all show/hide sections | .m-showhide |
||
.m-showhide--transcript |
Modifier to reduce the spacing and heading size for transcripts | .m-showhide |
||
.m-showhide__heading |
Base style for a show/hide heading | Yes | .m-showhide > h2, .m-showhide > h3, .m-showhide > h4, .m-showhide > h5 |
The heading level being used must be semantically correct for its location within the document |
.m-showhide__content |
Base style for a show/hide content container | Yes |
.m-showhide__heading + div
|
Must directly follow the .m-showhide__heading. |
.js-m-showhide-open |
Style to enabled the show/hide section to be automatically opened on page load |
.m-showhide__heading
|
Keyboard operations
- TAB
-
Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.8.0 (15/06/21)
Latest update:
- updated: The controls for this component have been updated from anchors to buttons following feedback from accessibility audits which flagged that our current pattern for elements which show and hide content are potentially confusing to screen reader users. These alterations have been made within the JavaScript, so no markup changes are required.