May 18, 2015 8:38 am

How to create Collapsible boxes with HTML 5

HTML 5 allows us to create collapsible boxes (panels) without the need of adding our custom JavaScript code – the <details> tag allows us to create panels with minimal setup and makes our pages load faster. However, it should still be used with fallback as support is not very decent as of the moment of writing this.

How to create Collapsible boxes with HTML5

Browser support

The <details> tag is supported in Chrome 31 and greater, Opera 27 and greater and Safari 7 or greater. The Android’s built-in browser supports it as well. Notably, IE and Firefox does not have a released version with support for the tag at this moment.

The <details> tag

The details tag accept an optional child – <summary>. The contents inside the details tag (we can place nearly everything) will be hidden until we open the box. The title of the box would either be a localized version of Details or if we add our own summary tag – the title would be the summary that we have added.

Optionally, we could declare if we want the collapsible box to be expanded or opened when the page is accessed with the attribute open. Its value is false by default which makes the contents of the boxes hidden until the user clicks on their title.

HTML 5 Books

Examples of the details tag

Here are some examples of the details tag in action.

First, we change some of its default styling:

We make the details container fluid, center its content and add some effects to the collapsible box (details).

Thereafter, we create a collapsible box that would be hidden by default and would display to the users Our Products List and a caret indicating users can see the products by clicking.

Then, we create another box:

This time, it will have the browser’s default localized summary or title.

Finally, we add another box which would also have the default summary or title but it will be opened whenever a user accesses the page.

References

Caniuse.com, “Details”, Available at: http://caniuse.com/#search=details. Accessed 2015/5/10

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:
  • ProgrammingNewbie .

    This code was broken on the demo. I’m using Ubuntu 15.04 and Firefox.

    • The tag is supported in Chrome 31 and greater, Opera 27 and greater and Safari 7 or greater. The Android’s built-in browser supports it as well. Notably, IE and Firefox does not have a released version with support for the tag at this moment.