Tag

Defines additional details that the user can view
or hide. Disclosure widget in which information
is visible only when the widget is toggled into
an “open” state. A summary or label must be
provided using the

element.

display: block;

Attributes

open
This Boolean attribute indicates whether the
details — that is, the contents of the

element — are currently visible.

name
This attribute enables multiple

elements to be connected, with only one open at a
time. This allows developers to easily create UI
features such as accordions without scripting.
The name attribute specifies a group name — give
multiple

elements the same name value
to group them. Only one of the grouped

elements can be open at a time — opening one will
cause another to close. If multiple grouped

elements are given the open attribute, only the first one in the source order will be rendered open.

Customizing

<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}