Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions

About This Example

The following example demonstrates using the Disclosure Pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.

Similar examples include:

Example

Parking FAQs

What do I do if I have a permit for an assigned lot, but can't find a space there? Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the problem. We will note and approve your alternate location and will investigate the cause of the shortage in your assigned facility.
What do I do if I lose my permit or if my permit is stolen? You should come to the Parking office and report the loss. There is a fee to replace your lost permit. However, if your permit was stolen, a copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
Is there free parking on holidays? All facilities are restricted from 2:00 am - 6:00 am on all days. No exceptions are made for any holiday or recess except those officially listed as a Holidays in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at all times.
Do all parking facilities have the same enforcement rules? Some parking facility restrictions differ from others. Be sure to take note of the signs at each lot entrance.

Accessibility Features

The semantic structure of the FAQ list is conveyed with native ul and li elements. To ensure the list structure is communicated to assistive technologies, a button element containing the question and a div element containing answer are children of an li element. NOTE: The button actions are used to hide and show the div element with the answer.
To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.
Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content. For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS currentcolor value for the stroke and fill properties of the polygon elements used to draw the arrows. If specific colors were instead used to specify the polygon properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.
Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentcolor value to be updated in high contrast mode. Some browsers do not use auto for the default value.

Keyboard Support

Key	Function
Tab	Moves keyboard focus to the disclosure button.
Space or
Enter	Activates the disclosure button, which toggles the visibility of the answer to the question.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
	`aria-controls="ID_REFERENCE"`	`button`	Identifies the element controlled by the disclosure button.
	`aria-expanded="false"`	`button`

Indicates that the container controlled by the disclosure button is hidden.
CSS attribute selectors (e.g. [aria-expanded="false"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.

Indicates that the container controlled by the disclosure button is visible.
CSS attribute selectors (e.g. [aria-expanded="true"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.

Assistive Technology Support

Learn how to interpret and use assistive technology support data

Embedded content

JavaScript and CSS Source Code

CSS: disclosure-faq.css
JavaScript: disclosureButton.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.