Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets.
HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc… those things were possible only with Javascript or flash earlier.
Demo
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> |
Browser Support
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.
source: http://caniuse.com/details
About The Author
