This page contains various tests with the details and summary elements. The page was first created in March 2012 and updated in July 2015 and November 2021. See the test results in the summary at the end of this page.

For HTML pages that test specific combinations of details, summary, tabindex and aria-describedby, see the following list:

With "open" attribute

Show/Hide Details

How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details> element.

Without "open" attribute

Show/Hide Details

How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details> element.

Without "open" attribute, and tabindex=0 on summary

Tabindex=0 makes the summary keyboard-focusable in Google Chrome 17 (2012), but not keyboard-actionable. In Google Chrome 95.0.4638.69 (November 2021) on Windows 10, the example below works perfectly fine with the keyboard.

Show/Hide Details

How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight (depending on the browser, of course, but we’ll come to that later). And so we introduce to you the <details> element.

Nested Details

Frequently Asked Questions
Where can I download Debian?

Go to the page Getting Debian and choose one of the options, such as downloading an installation image or a cloud image.

Where can I learn how to administer a Debian server?

Go to the Debian wiki or The Debian Administrator's Handbook.

Browser Support

Tests 21 March 2012

Tests 4 July 2015 (Microsoft Windows 7, 32 bits)

Tests 5 July 2015 (GNU/Linux Fedora 21 with GNOME, 64 bits)

Tests 9 November 2021 (Windows 10)

With NVDA 2019.3.1:

Tests 9 November 2021 (OpenSuse Leap 15.2 with KDE)

Background Reading