Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary.

We actually often see this effect around, but most of them are still built upon JavaScript or its brother: jQuery, which most people don’t understand. Now, with these new elements – details and summary – things will get easier.

So, if you want to apply this tag, you need to include a fallback function for unsupported browsers. The good news it, it’s simple; you can use this details polyfill, which will automatically replicate the tag functionality for old browsers.

Download this file and link it to the html document along with the jQuery (1.7+ at minimum) and make sure you place the polyfill before the close body tag.

And inside the head tag, insert the following conditional tag to include HTML5shiv for IE8 and earlier, otherwise the Internet Explorer will not recognize these new tags.

Conclusion

Creating such a hide-and-show effect with JavaScript or jQuery is actually relatively easy, but having it natively supported from the browser is definitely a much easier solution for many people. Whether you want to do it in JavaScript or in HTML5, it’s your decision. Thanks for reading, and I hope you enjoyed it.