Wikipad – Unofficial Coding Documentation

The Artists' Showroom Coding Wizards
12
Details and Summary

The contents of <details> can be hidden or shown on demand when the heading is clicked on. <summary> is a subelement of the <details> tag and contains the heading.

Contents

  1. Details <details>
  2. Summary <summary>

Details

open=""

The <details> element is closed by default until the user clicks on the heading. To have the contents of the element shown from the beginning, we use the open attribute.

Demo:

Closed

Contents

<details>
  <summary>Closed</summary>
  <p>Contents</p>
</details>
Open

Contents

<details open>
  <summary>Open</summary>
  <p>Contents</p>
</details>

.elided

Applies custom styles to both <details> and <summary> elements.

Demo:

*

Contents

<details class="elided">
  <summary>*</summary>
  <p>Contents</p>
</details>

Elided CSS

.elided {
  background-color: unset;
  padding: 0;
}
.elided summary {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: .5rem .75rem;
  color: var(--primary-medium);
  background: var(--primary-very-low);
  width: min-content;
  line-height: 1;
}

Summary

title=""

Used to specify the tooltip which appears when the mouse hovers over the link.

Demo:

With 'title' attribute

Contents

<details>
  <summary title="Hello World!">With 'title' attribute</summary>
  <p>Contents</p>
</details>

How it should appear:

Back to HTML ReferenceSpot something we didn't? Let us know!