Last updated

Details Tag Redocly Custom Tag

The details tag hides content behind an expandable element that users have to click to reveal. This feature is called progressive disclosure.

What is progressive disclosure?

Progressive disclosure is a design pattern meant to keep users focused on the most relevant content while providing access to more advanced information.

Syntax and usage

Wrap the content you want to hide inside the details tag. Include a summary attribute to pass the string that users will click to reveal the other content.

Click to expand

Hidden content that is revealed on click.

{% details summary="Click to expand" %}
  Hidden content that is revealed on click.
{% /details %}

Progressive disclosure can help manage information complexity. The idea is to present important information first, then provide an option for users to explore additional information.

Attributes

AttributeTypeDescription
summaryStringRequired.
Defines the text users click to reveal content.

Examples

Reveal information in order

How much does a polar bear weigh?

...enough to break the ice!

See what I did there?

{% details summary="How much does a polar bear weigh?" %}
  ...enough to _break the ice_!
  {% sup %}
    See what I did there?
  {% /sup %}
{% /details %}

Provide secondary information

Learn more about the thing

Some information provides valuable context, but doesn't belong in the main content. Putting that in progressive disclosure keeps users focused on the main ideas, but gives them room to explore.

  {% details summary="Learn more about the thing" %}
    Some information provides valuable context, but doesn't belong in the main content. Putting that in progressive disclosure keeps users **focused on the main ideas**, but gives them room to explore.
  {% /details %}

Best practices

Only use for non-essential information
The details tag should only be used to hide supplementary information. This approach ensures the main content is accessible and clear. It also aligns with the main goal of progressive disclosure, which is enhancing content by keeping it uncluttered.

Use descriptive summaries
Summaries should be concise, but descriptive enough to give users an idea of what clicking them will reveal. For the details tag to work effectively, users need to understand the type of information hidden behind the summary.

Limit nested information
Try to avoid nesting information deeper inside a details tag because it can confuse users and complicate navigation.