Accordion with Details and Summary Elements

Overview

This is an accordion using HTML’s native <details> and <summary> elements. It provides collapsible functionality without JavaScript, enabling semantic and lightweight implementation.

The <details> element is an HTML5 native element that creates a disclosure widget where users can toggle content visibility. It has excellent browser support and includes built-in accessibility features (Enter/Space key for toggling), making it a practical choice for implementation.

Preview

HTML

Basic Usage

<details class="detailsAccordion">
  <summary class="detailsAccordion__summary">Click to toggle</summary>
  <div class="detailsAccordion__content">
    <p>Content goes here.</p>
    <p>You can include multiple paragraphs, lists, images, and more.</p>
  </div>
</details>

Initially Open State

<details class="detailsAccordion" open>
  <summary class="detailsAccordion__summary">Initially open</summary>
  <div class="detailsAccordion__content">
    <p>The open attribute displays this accordion in an expanded state when the page loads.</p>
  </div>
</details>

CSS

※Uses CSS Nesting.

.detailsAccordion {
  --_border-color: oklch(85% 0.02 250);
  --_border-hover-color: oklch(70% 0.1 250);
  --_summary-bg: oklch(98% 0.02 250);
  --_summary-bg-hover: oklch(95% 0.05 250);
  --_summary-text-color: oklch(25% 0.1 250);
  --_content-bg: oklch(99% 0.01 250);
  --_content-text-color: oklch(20% 0.05 250);
  --_focus-outline: oklch(50% 0.2 250);
  --_transition-duration: 0.2s;

  border: 1px solid var(--_border-color);
  margin-block-end: 1em;
  overflow: hidden;
  transition: border-color var(--_transition-duration) ease;
  inline-size: 100%;

  &:hover {
    border-color: var(--_border-hover-color);
  }

  &:last-child {
    margin-block-end: 0;
  }
}

.detailsAccordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.5em;
  background-color: var(--_summary-bg);
  color: var(--_summary-text-color);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--_transition-duration) ease, box-shadow var(--_transition-duration) ease;
  list-style: none;

  /* デフォルトの三角印を非表示 */
  &::-webkit-details-marker {
    display: none;
  }

  /* カスタム矢印アイコンを追加 */
  &::after {
    content: "";
    inline-size: 0.5em;
    block-size: 0.5em;
    border: 2px solid currentColor;
    border-inline-start: none;
    border-block-start: none;
    transform: rotate(45deg);
    transition: transform var(--_transition-duration) ease;
    flex-shrink: 0;
    margin-inline-start: 1em;
  }

  &:hover {
    background-color: var(--_summary-bg-hover);
  }

  &:focus {
    outline: 2px solid var(--_focus-outline);
    outline-offset: -2px;
    background-color: var(--_summary-bg-hover);
    box-shadow: 0 0 0 3px oklch(50% 0.2 250 / 0.2);
  }

  &:focus-visible {
    outline: 2px solid var(--_focus-outline);
    outline-offset: -2px;
    background-color: var(--_summary-bg-hover);
    box-shadow: 0 0 0 3px oklch(50% 0.2 250 / 0.2);
  }
}

/* 開いている時の矢印を上向きに */
.detailsAccordion[open] .detailsAccordion__summary::after {
  transform: rotate(-135deg);
}

.detailsAccordion__content {
  padding: 1.5em;
  background-color: var(--_content-bg);
  color: var(--_content-text-color);
  line-height: 1.7;
}

Important Considerations

Browser Support

• Widely supported in modern browsers (excluding IE)
• Falls back to always-open state in older browsers (graceful degradation)

Toggle Animations

• Native details elements have limited animation capabilities for open/close transitions
• Consider JavaScript-enhanced implementations if smooth animations are required

SEO Considerations

• Content remains indexed by search engines even when initially hidden
• Consider using the open attribute for important information that should be immediately visible

Related Knowledge

• Use Logical Properties Over Physical Properties
• UI Animation Timing: 0.2-0.5 Second Rule