Coding details and summary

After the accordion page for drop downs this is an attempt with the more modern approach, using the HTML details and summary elements. These work together and are sometimes known as a disclosure widget.

A basic details box

While using details/summary is very easy to set up at first the funcionality is rather limited. In the the previous accordion page when you opened one accordion any previously opened ones were closed.

According to MDN “you can programmatically open and close the widget by setting/removing its open attribute.”

The open attribute is a boolean. It’s either open = true or open = false.

The code and how it works

Like the SPA buttons this involves running a forEach loop inside another forEach loop.

const detailsEls = document.querySelectorAll('details');

detailsEls.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    // Close all the details that are not targetDetail.
    detailsEls.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.open = false;
      }
    });
  });
});

How it works

  1. It loops through each details element and awaits a click event.
  2. The click runs a function which loops through all the details elements again
  3. The function runs an if statement that checks that each details element is not the one the one that was clicked.
  4. ..and if not it removes the open attribute.

There are other ways to acheive the same result using the toggle event

Styling with CSS

Another thing with details and summary is styling with CSS. Can we add transitions or hide/change the little dropdown icon? To hide the widget twisty arrow in firefox set the summary element to display: block

In chromium based browser you can use the webkit pseudo element: summary::-webkit-details-marker

The colour change on the summary element is all CSS: summary[open] { ... }

How practical is it?

So this works but how practical is it in real life? With small amounts of text its probably fine. But with larger amounts then elements below the open one tend to disappear from view. So it's probably still easier for a user to close the open one by clicking on it.

For use cases where there is a lot of text using tabs, all controlled from the top is a better solution.

Home