Details

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A UI component for creating collapsible accordion-style content using the details/summary elements.

Unlike Accordion, this component is implemented with CSS only — no JavaScript required.

Overview

↓

Preview

Details Title

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

<Details.Root>
  <Details.Summary>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content>
    <DummyText length="l" />
  </Details.Content>
</Details.Root>

<details class="b--details">
  <summary class="b--details_summary">
    <span class="b--details_title">Details Title</span>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="b--details_body">
    <div class="b--details_content l--flow">
      ...Contents...
    </div>
  </div>
</details>

Place <Details.Summary> (the open/close trigger) and <Details.Content> (the collapsible content) directly inside <Details.Root>. <Details.Summary> is composed of <Details.Title> and <Details.Icon>.

Styles

The Details base styles are defined in the following CSS.

_style.css

/* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
@layer lism-block {
  .b--details {
    --duration: var(--acc-duration, 0.25s);
    --icon-scale: 1.1;
    --icon-transform: rotate(0deg);
    --_contentGtr: 0fr;
  }
  .b--details[open] {
    --icon-transform: scaleY(-1);
    --_contentGtr: 1fr;
  }

  /* display: flex により summary のデフォルトマーカー（display: list-item）も解除される */
  .b--details_summary {
    display: flex;
    gap: var(--s10);
    align-items: center;
    justify-content: space-between;
    padding: var(--s15);
  }

  /* Safariで表示されるデフォルトの三角形アイコンを削除 */
  .b--details_summary::-webkit-details-marker {
    display: none;
  }

  .b--details_icon {
    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');
    display: inline-grid;
    background-color: currentColor;
    mask: var(--svg) no-repeat center center / contain;
    scale: var(--icon-scale);

    transition: transform var(--duration);
    transform: var(--icon-transform);
  }

  .b--details::details-content {
    display: grid;
    grid-template-rows: var(--_contentGtr);
    transition-duration: var(--duration);
    transition-property: content-visibility, grid-template;
    transition-behavior: allow-discrete;
  }

  /* コンテンツ内部のラッパー（grid-template-rows: 0frのアニメーションに必須） */
  .b--details_body {
    overflow: hidden;
  }

  .b--details_content {
    /* _body に padding を付けると閉じた時に余白が残るので _content に付ける */
    padding: var(--s15);
  }
}

The full source code is available on GitHub.

Usage

Provided as Details (b--details) from the @lism-css/ui package.

Import

import { Details } from '@lism-css/ui/react';

import { Details } from '@lism-css/ui/astro';

<link href="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.28.0/dist/style.css" rel="stylesheet" />

The following components are available:

<Details.Root>: The root element (details element)
<Details.Summary>: The open/close trigger (summary element)
<Details.Title>: The title inside the summary (defaults to span)
<Details.Icon>: An icon indicating the open/close state (rendered with CSS)
<Details.Content>: The collapsible content

Props

Prop	Description
`<Details.Root>` `open`	Expands the details initially (the `open` attribute of the `details` element).
`<Details.Root>` `--duration`	Duration of the expand/collapse animation.
`<Details.Title>` `as`	The HTML tag used to render the title inside the summary element. When a heading tag is specified, `set--plain` is applied.

Examples

Styling example

↓

Preview

Details Title

<Details.Root bd>
  <Details.Summary p="20" hov={{bgc:"base-2"}}>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20" pt="15">
    <DummyText length="l" />
  </Details.Content>
</Details.Root>

<details class="b--details -bd">
  <summary class="b--details_summary -p:20 -hov:-bgc" style="--hov-bgc: var(--base-2)">
    <span class="b--details_title">Details Title</span>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="b--details_body">
    <div class="b--details_content l--flow -p:20 -pt:15">
      <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.</p>
    </div>
  </div>
</details>

Changing the title tag

<Details.Title> renders as a span by default, but you can specify a heading tag such as h3 via as to render it as an actual heading element. When a heading tag is specified, set--plain is applied to reset the default heading styles.

↓

Example

Details Title

<Details.Root bd>
  <Details.Summary>
    <Details.Title as="h3">Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  ...
</Details.Root>

<details class="b--details -bd">
  <summary class="b--details_summary">
    <h3 class="b--details_title set--plain">Details Title</h3>
    <span class="b--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  ...
</details>

Heading elements inside summary

There was a known issue where screen readers could not detect the role of heading elements placed inside summary, but as of 2026, this has been largely resolved in modern browsers.

Restricting to one open item

As a native feature of details/summary, adding a name attribute restricts the group with the same name to one open item at a time.

↓

Preview

Details Title 1

Details Title 2

<Stack g="10">
  <Details.Root bd name="details-group-01">
    <Details.Summary>
      <Details.Title>Details Title 1</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content>
      <DummyText length="l" />
    </Details.Content>
  </Details.Root>
  <Details.Root bd name="details-group-01">...</Details.Root>
</Stack>

<div class="l--stack -g:10">
  <details class="b--details -bd" name="details-group-01">...</details>
  <details class="b--details -bd" name="details-group-01">...</details>
</div>

Changing the animation duration

The duration of the <Details> open/close animation is controlled by the --duration variable, which defaults to the same value as <Accordion> — --acc-duration.

For local adjustments, override the --duration variable. For global adjustments, override --acc-duration on :root.

↓

Preview

Details Title

<Details.Root bd style={{ '--duration': '.4s' }}>
  <Details.Summary>...</Details.Summary>
  <Details.Content>...</Details.Content>
</Details.Root>

<details class="b--details -bd" style="--duration: 0.4s">...</details>