New HTML-5 Elements DETAILS and DIALOG

Published: 2017-10-27
Updated: 2017-11-12
Web: https://fritzthecat-blog.blogspot.com/2017/10/new-html-5-elements-details-and-dialog.html

The new HTML-5 DETAILS and DIALOG elements are supported now by most web-browsers. When you don't see a triangle-right below, your current browser doesn't support it.

<details>
  <summary>Click to see a simple <code>DETAILS</code> example.</summary>
  <p>This is hidden content ...</p>
</details>

An expand-control that works without scripting and arrow-resources!

<button onclick="toggleDialog('dialog');">Click to see a simple <code>DIALOG</code> example.</button>
<br>

<dialog id="dialog" onclick="toggleDialog('dialog');">
  <p>You clicked me?!</p>
  <p>What do you want?</p>
  <p>I told you to not disturb me!</p>
  <p>So now get out.</p>
</dialog>

<script>
  var toggleDialog = function(elementId) {
    var dialog = document.getElementById(elementId);
    if (dialog.getAttribute("open") !== "")
      dialog.setAttribute("open", "");
    else
      dialog.removeAttribute("open");
  };
</script>

This needs some scripting to close the dialog upon various events, in this example by clicking onto it, or clicking onto its trigger button.

How to Control Them

Both elements toggle their visibility when the attribute

open

is set into them, or removed from them. In the DIALOG example you can see (in the script code) how this is done.

If you set the open attribute in HTML code, it would be initially open. The attribute doesn't need to have a value, it just needs to be present (unlike in XML).

DETAILS

Unfortunately the DETAILS element is not animated. Like the CSS display property, it does not support the CSS transition property.

Everything else is quite straight forward. You also can build trees with this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<style>
  details.tree {
    padding-left: 1em;
  }
  div.tree {
    padding-left: 2em;
  }
</style>

<details class="tree"><summary>Animals</summary>
  <details class="tree"><summary>Mammals</summary>
    <details class="tree"><summary>Cats</summary>
      <div class="tree">
        <div>Garfield</div>
        <div>Catbert</div>
      </div>
    </details>
    <details class="tree"><summary>Dogs</summary>
      <div class="tree">
        <div>Lassie</div>
        <div>Bessy</div>
      </div>
    </details>
    <details class="tree"><summary>Mice</summary>
    </details>
    <div class="tree">Others</div>
  </details>
  <details class="tree"><summary>Fish</summary>
    <div class="tree">
      <div>Capt'n Nemo</div>
      <div>Fisheye</div>
    </div>
  </details>
</details>

DIALOG

The DIALOG element may require a little JS programming. Primarily you need to decide which user gestures should close the ....

Dialog

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<dialog open id="dialog2" style="border: 3px solid gray; border-radius: 1em;">

  <div>
    <b>Possible Close Events</b>
    <div
        style="float: right; font-family: sans-serif; font-size: smaller; cursor: pointer;"
        onclick="toggleDialog('dialog2');"
        title="Close">
      X
    </div>
  </div>

  <hr>

  ....

</dialog>

The dialog's position is absolute, that means it doesn't take part in the layout flow. By default it will display vertically on the position where the layout contains it, and horizontally centered. Elements below the dialog will be covered by it. Therefore you always will need to program a way to close it.

By default the dialog has no title-bar, but you can style it fully, except the CSS position property. In the example shown here I added a traditional "Close" button.

Such a dialog could be used as rich-text custom tooltip, or context menu!

Summary

HTML-5 comes with a lot of new and nice features, and moves toward application programming. Web-applications don't need to import tons of JS and CSS user-interface resources any more. Nearly every desktop-application control is available also in browsers now. Unfortunately animations are still not supported out-of-the-box for open/close elements like DETAILS and DIALOG.

ɔ⃝ Fritz Ritzberger, 2017-10-27