Paying Attention to the Details

Shlok Desai
Feb 27, 2019 · 3 min read

One of the most common UI components that I have had to build and use, seemingly on a day-to-day basis, is one where content is displayed in a container after some user interaction like a click or tap.

Some components that are used to implement such interactions are

  • Accordions
  • Tooltips
  • Modals
  • Overlays

Some of the common problems that I’ve seen while building out such components are:

  • The tendency to use generic <div> tags which are not semantic
  • We need hefty state management especially while using React to handle all possible use cases.
  • Pure CSS solutions are sometimes not enough to implement a responsive design leading to JavaScript bloat.

Enter the <details> tag

The HTML5 <details> tag is a good solution for implementing these components. Paired with the <summary> tag, it can be used to quickly build widgets that show and hide content in a container.

Details in action

As seen in the example, it can be used out of the box to implement a simple accordion-like pattern.

However, we can enhance the details tag further and use it to craft more components for a wider variety of use cases.


The examples below use React but they can be easily implemented using vanilla JavaScript as well.

Tip: for these examples be sure to add a CSS rule that removes the details arrow

details summary::-webkit-details-marker {  display:none;}

Modal

We can write a simple component using <details> and <summary> tags which will be invoked as:

<Container launchText="Click me" content={<h2>Hello There!</h2>} />

The component takes two props:

launchText — the component or text for the summary which the user will interact with, through a click or tap, to display content.

content — the component or text to show within the container.

We’ll add some styles to show the modal-content in the center of the screen

Result:

As we see, the container component is minimal and more descriptive. The only caveat here is that in order to close the details tag, we would have to include a ref to the details DOM node and set open=false on it when the close button is clicked.

We can extend this concept further to create a full page overlay

Overlay

To create a full page modal overlay, change three style rules to:

Result:

Tooltip

<details> can also be used to create Tooltips or Flyouts. All we need to do is add some styles and pseudoelements.

Result:

As we can see, the <details> & <summary> tags provide a clean interface to build out some common UI components.

There are some caveats to using the <details> tag like:

  • Browser compatibility: As per CanIUse, the details tag is supported by 87% of desktop browsers and 96% of mobile browsers. It may not be an ideal solution if you’re supporting IE11 & Edge but would be useful for mobile experiences.
  • Direct DOM Access: As we see in the example, we need to access the DOM node to remove the open attribute. It might be a drawback to directly access the DOM especially while using a framework like React but I would test various use cases and profile the performance of the component before dismissing the approach.

And there you have it. A simple way to create semantically consistent UI elements to hide and show content. Just remember to keep your eye on the <details> 😉

WalmartLabs

Using technology, data and design to change the way the world shops. Learn more about us - http://walmartlabs.com/

Shlok Desai

Written by

Software Engineer — Front End. Walmart Labs

WalmartLabs

Using technology, data and design to change the way the world shops. Learn more about us - http://walmartlabs.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade