Details Element

Provides a replacement to the native details element, which does not trigger animations on expansion

Usage

Basic Usage

The <content-details> element is intended to behave the same as the native <details> element. Its internal structure is similar to, albeit divergent from its native counterpart.

NOTE

Unlike other PortfoLitO elements, the <content-details> element does not wrap a native <details> element.

The structural differences are to enable animation and layout shifts, which are not possible using the native element. This can be seen with the rotating triangle when expanding or collapsing content in the example below.

Something small enough to escape casual notice.

<content-details>
  Something small enough to escape casual notice.
</content-details>

With Summary

When not otherwise specified, the <content-details> element provides a default summary. This can be overridden with your desired summary by setting the slot attribute of any child element to summary.

System Requirements

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.

<content-details>
  <u slot="summary">System Requirements</u>
  <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>
</content-details>

With Animation

The primary purpose of the <content-details> element is to enable animations that are not possible with the native <details> element.

In the example below, a CSS transition has been set on the grid-template-rows property of the content part. This transition is between values of 0fr when closed, and 1fr when open, providing animation and layout shifts for the content height.

System Requirements

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.

<style>
  content-details::part(content) {
    transition: grid-template-rows 0.3s ease-in-out;
  }
</style>
<content-details>
  <u slot="summary">System Requirements</u>
  <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>
</content-details>

List Variant

For convenience, the details element can host list items by setting the variant attribute to list. In this variant, the content part is rendered as a <ul> element, and list items are styled and animated on entry, as in the example below.

Apollo Astronauts

Neil Armstrong

Alan Bean

Peter Conrad

Edgar Mitchell

Alan Shepard

<content-details variant="list">
  <u slot="summary">Apollo Astronauts</u>
  <li>Neil Armstrong</li>
  <li>Alan Bean</li>
  <li>Peter Conrad</li>
  <li>Edgar Mitchell</li>
  <li>Alan Shepard</li>
</content-details>

Grid Variant

Details content can also be arranged in a grid, by setting the variant attribute to grid. In this variant, the content part is rendered as a <content-section> element.

The example below leverages the grid layout, in combination with the <content-article> element, to animate entry of each article individually when the details element is expanded.

System RequirementsRequires a computer running an operating system.The computer must have some memory.Ideally also some kind of long-term storage.An input device as well as some form of output device is recommended.

<style>
  content-article {
    background: #f6f6f7;
    border: 1px solid #e2e2e3;
    
    .dark & {
      background: #161618;
      border: 1px solid #2e2e32;
    }
  }
</style>
<content-details variant="grid">
  <u slot="summary">System Requirements</u>
  <content-article variant="panel">Requires a computer running an operating system.</content-article>
  <content-article variant="panel">The computer must have some memory.</content-article>
  <content-article variant="panel">Ideally also some kind of long-term storage.</content-article>
  <content-article variant="panel">An input device as well as some form of output device is recommended.</content-article>
</content-details>

Attributes

Name	Description	Type	Default
open	Whether the details element is expanded	Boolean	false
variant	Which layout to use for the details contents	String	-

CSS Parts

Name	Description
container	Overall responsive container element
summary	Container element for summary slot, including toggle arrow
content	The actual content of the details element

Slots

Name	Description	Type
none	Content to show when details is expanded	* | <li>
summary	Preview of content shown when details is expanded	*