Hiding child elements inside an open details element

user862B 0
Viewed 62

We have a details and summary element, which contains some div elements, like so:

<details open>
  <summary>Some summary</summary>
  <div>This content is display</div>
  <div class="hidden">This content is NOT displayed</div>
</details>

I have 2 questions that I'm struggling to find the answers to online:

  1. Is it "okay" / correct to hide child elements of an open details element. In the example, you'll see the the 2nd element is hidden, using display: none.

  2. Should details only have 1 child element, besides the summary element? On https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element, it does state the following:

    Content model: One summary element followed by flow content.

    And flow content is defined by the following: https://html.spec.whatwg.org/multipage/dom.html#flow-content

    But I'm not sure if that means I'm allowed multiple flow content's.

html
2 Answers

1. Is it "okay" / correct to hide child elements of an open details element

  • Yes, there's nothing wrong with hiding an element inside a details element.
  • Actually, you may programmatically toggle the display of those hidden elements just like any other element in the page.

2. Should details only have 1 child element, besides the summary element?

  • No, you are not limited to have only one element inside a details.
  • Also, details tags do not require summary elements to be rendered correctly. Although it is recommended to have a summary element in order to have your own label for the details element, you can ditch that summary element entirely and the browser will show its own placeholder/label (Chrome show the text "Details" if a details tag doesn't contain a summary).
  • In short, you can have as many elements inside a details but a maximum of 1 summary element.

With that being said, let's have a simple demo that illustrates the use of details that, on its own, has a bunch of different elements. You can use the button to toggle the div that is initially hidden:

const myDIV = document.getElementById('my-div'),
  toggler = document.getElementById('toggler');

toggler.addEventListener('click', () => myDIV.classList.toggle('hidden'));
.hidden {
  display: none;
}


/** just to make the demo visually appealing */

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  margin-top: 10px;
  padding: .5em .5em 0;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
  cursor: pointer;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}
<button id="toggler">Toggle Initially Hidden DIV</button>
<details open>
  <summary>Some summary</summary>
  <div>This content is display</div>
  <div id="my-div" class="hidden">This content is NOT displayed and its display can be toggled</div>
  <p>I have an image too!<img src="https://via.placeholder.com/150" style="display:block;margin: 10px auto 0" width="150"></p>
</details>

And here's a demo of a details element without a summary:

span {
  padding: 4px;
  border-radius: 4px;
  background-color: #e0e0e0;
}


/** just to make the demo visually appealing */

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .3em .5em;
  cursor: pointer;
}

details[open] {
  padding: .3em;
}
<details open>
  <div>i don't have a <span>summary</span> element! You can see that the browser used a its own label</div>
</details>

Learn more about the details element.

Learn more about the summary element.

ths0

From my standpoint

First question, yes.

You literally could hide or toggle the display of details's child elements. Because of each different case, e.g., client or system, you may have to display different content details. Toggle item description display is a simpler way to achieve that.

Second question, depends on how the description is.

In details and summary, their name represents their meaning and purpose. With UX design, as normal, we can see that we could use them to summarize some details or a long description into a short sentence to express the representative meaning succinctly, similar to header or title.

Of course, we don't need summary for just one short description or detail.

HuyPham0
Related