Before we continue to the css/html code, let’s take a look at the fully-functional accordion widget here…
Details and Summary Elements
By using the <details> and <summary> elements together we can create an accordion like toggle widget.
As per W3C specification the detail element is defined as
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
W3C defines the summary element as
The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view/hide the details.
However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.
Usage – Syntax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<details> <summary>Click to show/hide</summary> <p>content goes here<p> </details> <details> <summary>Click to show/hide</summary> <p>content goes here<p> </details> <details> <summary>Click to show/hide</summary> <p>content goes here<p> </details> <details> <summary>Click to show/hide</summary> <p>content goes here<p> </details>
It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh which will do the trick on other browsers.