Disclosure (Show/Hide) of Answers to Frequently Asked Questions
+
+ Please provide feedback on this example in
+ issue 265.
+
+
+ The following example demonstrates using the
+ disclosure design pattern
+ to create a set of frequently asked questions where the answers may be independently shown or hidden.
+
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.
+
+
+
+
+
+
+
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
+
+
+
+
+
+ button
+
+
+
+ span
+
+
+ Identifies the span element as a button.
+
+
+
+
+
+ tabindex="0"
+
+
+ span
+
+
+ Includes the span element in the tab sequence of the page.
+
+
+
+
+
+ aria-controls="IDREF"
+
+
+ span
+
+
+ The disclosure button controls visibility of the container identified by the IDREF value.
+
+
+
+
+
+ aria-expanded="false"
+
+
+ span
+
+
+
+
+ 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 the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+
+
+
+
+
+
+ aria-expanded="true"
+
+
+ span
+
+
+
+
+ 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 the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+ Please provide feedback on this example in
+ issue 264.
+
+
+ The following example demonstrates using the
+ disclosure design pattern
+ to provide a way of revealing a table of data that complements an image.
+
+
+ Charles Minard's 1869 chart showing the number of men in
+ Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they
+ encountered on the return path
+ ( chart details ).
+
+
+
Data for Charles Minars's Chart of Naploean's Invasion of Russia
+
+
+
+
Location
+
Approximate Date
+
Size of Army
+
Tempature C
+
Tempature F
+
Direction
+
+
+
+
+
Kowno River
+
June 24th
+
442,000
+
na
+
na
+
Advance
+
+
+
Wilna
+
June 30th
+
400,000
+
na
+
na
+
Advance
+
+
+
Witebsk
+
na
+
175,000
+
na
+
na
+
Advance
+
+
+
Smolensk
+
August 16th
+
145,000
+
na
+
na
+
Advance
+
+
+
Chjat
+
na
+
127,000
+
na
+
na
+
Advance
+
+
+
Mojaisk
+
September 7th
+
100,000
+
na
+
na
+
Advance
+
+
+
Moscow
+
September 14th
+
100,000
+
na
+
na
+
Advance
+
+
+
Malo-jarosewli
+
October 18th
+
96,000
+
0
+
32
+
Retreat
+
+
+
Mojaisk
+
October 24th
+
87,000
+
0
+
32
+
Retreat
+
+
+
Wirma
+
na
+
55,000
+
na
+
na
+
Retreat
+
+
+
Smolensk
+
November 14th
+
37,000
+
-26
+
-13
+
Retreat
+
+
+
Orscha
+
na
+
24,000
+
na
+
na
+
Retreat
+
+
+
Botr
+
na
+
20,000
+
-14
+
-7
+
Retreat
+
+
+
Studienska (reinforcements arrive)
+
December 1st
+
50,000
+
-25
+
-13
+
Retreat
+
+
+
Minsk
+
December 1st
+
28,000
+
-30
+
-22
+
Retreat
+
+
+
Moloderno
+
December 6th
+
28,000
+
-38
+
-34
+
Retreat
+
+
+
Smorgeni
+
December 7th
+
12,000
+
-33
+
-27
+
Retreat
+
+
+
Wilna
+
+
na
+
+
8,000
+
na
+
na
+
Retreat
+
+
+
Kowno (reinforcements arrive)
+
December 14th
+
10,000
+
na
+
na
+
Retreat
+
+
+
+
+
+
+
+
+
+
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 long description.
+
+
+
+
+
+
+
+
Role, Property, State, and Tabindex Attributes
+
+
+
+
Role
+
Attribute
+
Element
+
Usage
+
+
+
+
+
+ button
+
+
+
+ span
+
+
+ Identifies the span element as a button.
+
+
+
+
+
+ tabindex="0"
+
+
+ span
+
+
+ Includes the span element in the tab sequence of the page.
+
+
+
+
+
+ aria-controls="IDREF"
+
+
+ span
+
+
+ The disclosure button controls visibility of the container identified by the IDREF value.
+
+
+
+
+
+ aria-expanded="false"
+
+
+ span
+
+
+
+
+ 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 the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+
+
+
+
+
+
+ aria-expanded="true"
+
+
+ span
+
+
+
+
+ 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 the CSS :before pseudo selector and the content property
+ so the image is reliably rendered in high contrast mode of operating systems and browsers.
+
+