Typography Example: Details summary

This example page demonstrates conditionally revealing information, using the HTML5 details and summary elements, they are described here.

These elements are only supported by a few modern browsers at the moment so you’ll need a JavaScript polyfill to make them work in other browsers. GOV.UK elements uses this polyfill from GOV.UK frontend toolkit.

The polyfill uses the aria-controls attribute on the controlling element to associate it with the section it shows/hides. This is combined with the aria-expanded attribute on the section to inform the accessibility API of the changes to the document.

Example 1: Summary content is visible, details content is hidden

Where to find your driving licence number

Your driving licence number can be found in section 5
of your driving licence photocard.

Example 2: Summary content is visible, details content is visible

The inital state is set to be open, by setting the boolean open attribute.

Where to find your driving licence number

Your driving licence number can be found in section 5
of your driving licence photocard.

Example 3: Summary content is visible, details content is visible

The inital state is set to be open, by setting the value of the open attribute to open.

Where to find your driving licence number

Your driving licence number can be found in section 5
of your driving licence photocard.