HTML5 details / summary

Very often while reading the web you’ll come across blog posts and specs that mention all these new JavaScript APIs and elements offered by HTML5. Having said that, such elements are still used rarely due to the fact that specs tend to change or browser vendors only partly implement them.

Graceful degradation is the keyword. By using JavaScript we can offer a pretty similar experience. The first thing we note is that the details / summary functionality only work in Chrome at the moment so all other browsers will fall back to a simple solution.

General markup

<details>
  <summary>Topic</summary>
  <div>Detail content.</div>
</details>

In this state the user won’t see the detail content. As soon as the summary is clicked the details element gets the attribute “open” (and could therefore be styled in another way).

<details open>
  <summary>Topic</summary>
  <div>Detail content.</div>
</details>

The content in the div is now visible. At this point you may ask yourself why this only works in Chrome and not in other browsers?

Make it working in multiple browsers

I extended the markup pretty easily by adding an anchor and initially hiding the div content:

<details>
  <summary>
	<a class="toggle">Topic</a>
  </summary>
  <div style="display:none">Detail content.</div>
</details>

If a browser now accesses this page we perform a simple check to see whether the element is supported (this script block is only representational. On the platform the JS is LazyLoaded in a dedicated file):

var testElement = document.createElement("details");
  // check if object supports open property
  if ("open" in testElement) {
    // do mostly nothing
  } else {
    // fallback
  }

Note: This check returns “true” in Chrome 10 although it is not working. (The current stable version is 15, so I suppose we don’t need to deal with that.)

If the element is supported, the anchors get replaced with their text content and are therefore no longer trigger page reloads which helps to save an additional click observer that would prevent the default action. We also call “.show()” on all the div elements as they are hidden by the browser anyway.

On the other hand, if the element is not supported we observe a click event via delegation on the anchors and toggle the div element for the corresponding anchor when it is clicked.

Implementation

This is not just a theoretical article. I actually implemented this into XING’s help center, so if you now visit http://www.xing.com/help/ and then go to the FAQ section you will end up on a site where such a mechanism is used to display the sub-content of list entries. I doubt anyone will notice a difference between both variants.

Conclusion

Although we have to deal with older browsers down to Internet Explorer 6, this should not prevent anyone from trying out new things. HTML5 offers cool new possibilities to write and interact with the DOM. And most often it is possible with a little bit of investigational work that, in the end, delivers a degraded experience that still feels right.

About the Author

This entry was posted on Wednesday, November 30th, 2011 at 14:35 and is filed under Frontend. You can follow any responses to this entry through the RSS feed. You can skip to the end and leave a response. Pinging is currently not allowed.