🎛️ Chapter 40: Interactive Semantic Elements

Custom Toggle Components with details

Modern exclusive accordions via the native `name` attribute, `beforematch` search integration, and zero-JS accordion groups.

LEARNING OBJECTIVES ⌵

Implement native, zero-JavaScript exclusive accordions using the HTML name attribute on <details>.
Understand the browser-level mutual exclusivity mechanics of named disclosure groups.
Master in-page searchability (Ctrl+F) integration with the beforematch event and hidden="until-found".
Design robust, responsive accordion architectures for enterprise design systems.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine a physical car radio dashboard from the 1980s with mechanical preset buttons.

When you press button 1 (Jazz 89.5), it pushes in and locks in place.
When you later press button 2 (Rock 101.1), a mechanical lever inside the radio automatically pops button 1 back out. Only one radio station can ever be tuned at a time.
You didn't need an electronic computer or external wiring to pop button 1 out; the physical mechanical linkage inside the radio housing handled the mutual exclusivity automatically.

For years in web development, creating an "exclusive accordion" (where opening one accordion section automatically closes any currently open section) required JavaScript event listeners, looping through sibling elements with querySelectorAll, and removing attributes manually.

The modern HTML Living Standard introduced the name attribute for <details>. By simply assigning the same name="faq-group" to multiple <details> elements, the browser acts as that mechanical radio linkage: opening one details element automatically closes all other sibling details sharing that name with zero JavaScript.

+-----------------------------------------------------------------------------+
|                     NATIVE EXCLUSIVE ACCORDION (name="faq")                  |
+-----------------------------------------------------------------------------+
|                                                                             |
|  <details name="faq" open>                                                  |
|  ▼ What is your SLA uptime?                                                 |
|    "We guarantee 99.99% multi-region uptime."                               |
|                                                                             |
|  <details name="faq">                                                       |
|  ▶ How does data replication work?  <-- User clicks this                    |
|                                                                             |
|  <details name="faq">                                                       |
|  ▶ Can I cancel anytime?                                                    |
|                                                                             |
+-----------------------------------------------------------------------------+
                                       |
                   (Browser automatically pops previous item closed)
                                       v
+-----------------------------------------------------------------------------+
|  <details name="faq">                                                       |
|  ▶ What is your SLA uptime?         <-- Automatically closed by browser!    |
|                                                                             |
|  <details name="faq" open>                                                  |
|  ▼ How does data replication work?  <-- Now open                            |
|    "Data is synchronously mirrored across 3 availability zones."            |
|                                                                             |
|  <details name="faq">                                                       |
|  ▶ Can I cancel anytime?                                                    |
+-----------------------------------------------------------------------------+

Technical Deep Dive & Specifications

The `name` Attribute on `<details>`

The WHATWG HTML Living Standard specifies:

The name content attribute gives the name of the group of details elements that this element belongs to. If multiple <details> elements in the same tree have the same name attribute value, at most one of them can have the open attribute set at any given time.

interface HTMLDetailsElement : HTMLElement {
  [CEReactions] attribute boolean open;
  [CEReactions] attribute DOMString name; // Group name property
};

<!-- Native Exclusive Accordion Group (Zero JavaScript) -->
<details name="account-settings">
  <summary>Personal Information</summary>
  <p>Update your email address and profile photo.</p>
</details>

<details name="account-settings">
  <summary>Security & Password</summary>
  <p>Manage two-factor authentication and passwords.</p>
</details>

<details name="account-settings">
  <summary>Billing & Subscriptions</summary>
  <p>Download recent invoices and payment receipts.</p>
</details>

In-Page Find (`Ctrl+F`) & the `beforematch` Event

A major flaw of legacy JavaScript accordions (display: none or CSS height clipping) is that when users press Ctrl+F (Cmd+F on macOS) to search for text on a page, words inside closed accordions are invisible to the browser's find tool.

Modern browser rendering engines solve this with hidden="until-found" and native <details> integration:

When a user searches for text contained inside a collapsed <details> element, the browser engine detects the text match.
The browser dispatches a native beforematch event to the <details> element.
The browser automatically sets open="true" on the matching <details> element, smoothly revealing the text and scrolling the user directly to the highlighted match.

const detailsItem = document.querySelector('details');

detailsItem.addEventListener('beforematch', () => {
  console.log('Search match detected! Browser is auto-expanding this widget.');
});

Pure HTML vs Legacy JavaScript Accordion Comparison

Feature	Modern HTML (`<details name="...">`)	Legacy JavaScript Accordion
JavaScript Dependency	Zero JavaScript	Requires event listeners & query loops
Mutual Exclusivity	Built-in via `name="group-name"`	Handled by custom JS state management
SSR / No-JS Resilience	100% functional before scripts execute	Non-functional or broken until JS hydrates
Find-in-Page (`Ctrl+F`)	Auto-expands on match (`beforematch`)	Matches are completely missed or hidden
Keyboard Accessibility	Native `Tab`, `Enter`, `Space`	Requires manual `tabindex` and `aria-expanded`

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 73, 87, 101: Applies name="cloud-faq" to all three <details> elements. This binds them into an exclusive group governed by the browser engine.
Line 73: The first item specifies open. On page load, this item starts open while the others remain closed.
Lines 49–59: Combines the native name attribute with the CSS Grid 0fr to 1fr transition for a zero-JS animated exclusive accordion.
No JavaScript Needed: When the user clicks Item 2 or 3, the browser automatically closes the currently open item without a single line of script.

Expected Browser Render Output

Initial Load: Item 1 is expanded with its text visible; Items 2 and 3 are collapsed.
Clicking Item 2: Item 1 smoothly collapses down to 0px, and Item 2 simultaneously expands to reveal its DDoS mitigation description.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exclusive Accordion Playground</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 3rem;
      background: #0f172a;
      color: #f8fafc;
    }
    .accordion-group {
      max-width: 600px;
      margin: 0 auto;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      overflow: hidden;
    }
    details {
      border-bottom: 1px solid #334155;
      transition: background 0.2s;
    }
    details:last-child {
      border-bottom: none;
    }
    details[open] {
      background: #182234;
    }
    summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 1.5rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      color: #f1f5f9;
    }
    summary::-webkit-details-marker {
      display: none;
    }
    summary:hover {
      color: #38bdf8;
    }
    /* Animated Chevron Indicator */
    .chevron {
      width: 18px;
      height: 18px;
      stroke: #94a3b8;
      stroke-width: 2.5;
      fill: none;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s;
    }
    details[open] summary .chevron {
      transform: rotate(180deg);
      stroke: #38bdf8;
    }
    /* CSS Grid 0fr -> 1fr Animation */
    .grid-animator {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    details[open] .grid-animator {
      grid-template-rows: 1fr;
    }
    .grid-content {
      min-height: 0;
      overflow: hidden;
    }
    .details-body {
      padding: 0 1.5rem 1.5rem 1.5rem;
      color: #94a3b8;
      line-height: 1.6;
    }
  </style>
</head>
<body>

<div class="accordion-group">
    
    <details name="cloud-faq" open>
      <summary>
        <span>What is edge caching latency?</span>
        <svg class="chevron" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </summary>
      <div class="grid-animator">
        <div class="grid-content">
          <div class="details-body">
            Global edge PoPs deliver cached assets with median latencies below 15 milliseconds across North America, Europe, and Asia-Pacific.
          </div>
        </div>
      </div>
    </details>

<details name="cloud-faq">
      <summary>
        <span>How are DDoS attacks mitigated?</span>
        <svg class="chevron" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </summary>
      <div class="grid-animator">
        <div class="grid-content">
          <div class="details-body">
            Our automated Anycast network absorbs Layer 3/4 and Layer 7 volumetric attacks with over 150 Tbps of edge scrubbing capacity.
          </div>
        </div>
      </div>
    </details>

<details name="cloud-faq">
      <summary>
        <span>Can I bring custom SSL certificates?</span>
        <svg class="chevron" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
      </summary>
      <div class="grid-animator">
        <div class="grid-content">
          <div class="details-body">
            Yes, you can upload custom EV/OV certificates or leverage our automated Let's Encrypt TLS renewal system at no additional cost.
          </div>
        </div>
      </div>
    </details>
  </div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Enterprise Product Feature Matrix

Construct an enterprise product comparison matrix with two distinct, independent exclusive accordion groups:

Group 1: Infrastructure Architecture (name="infra-group"):
- Section A: "Global CDN Distribution" (Open by default)
- Section B: "Serverless Compute Runners"
Group 2: Security & Compliance (name="security-group"):
- Section A: "SOC 2 Type II Certification" (Open by default)
- Section B: "HIPAA & GDPR Compliance"
Verify that opening an item in Group 1 does not close items in Group 2, but closes other items within Group 1.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solution: Feature Matrix</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 3rem;
      background: #090d16;
      color: #f1f5f9;
    }
    .matrix-wrapper {
      max-width: 650px;
      margin: 0 auto;
    }
    h2 {
      color: #38bdf8;
      font-size: 1.4rem;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
    .group-box {
      background: #131b2e;
      border: 1px solid #1e293b;
      border-radius: 8px;
      overflow: hidden;
    }
    details {
      border-bottom: 1px solid #1e293b;
    }
    details:last-child {
      border-bottom: none;
    }
    summary {
      padding: 1rem 1.25rem;
      font-weight: 600;
      cursor: pointer;
      color: #e2e8f0;
      user-select: none;
    }
    summary:hover {
      color: #38bdf8;
    }
    .content {
      padding: 0 1.25rem 1.25rem 1.25rem;
      color: #94a3b8;
      line-height: 1.5;
    }
  </style>
</head>
<body>

  <div class="matrix-wrapper">
    <h1>Enterprise Platform Specifications</h1>

    <!-- Group 1: Infrastructure -->
    <h2>1. Infrastructure Architecture</h2>
    <div class="group-box">
      <details name="infra-group" open>
        <summary>Global CDN Distribution</summary>
        <div class="content">
          <p>Over 300 points of presence worldwide with automated HTTP/3 and Brotli compression.</p>
        </div>
      

      <details name="infra-group">
        <summary>Serverless Compute Runners</summary>
        <div class="content">
          <p>V8 isolate workers with cold start times under 5ms and automatic horizontal scaling.</p>
        </div>
      </details>
    </div>

    <!-- Group 2: Security & Compliance -->
    <h2>2. Security & Compliance</h2>
    <div class="group-box">
      <details name="security-group" open>
        <summary>SOC 2 Type II Certification</summary>
        <div class="content">
          <p>Audited annually by independent third-party assessors covering Trust Services Criteria.</p>
        </div>
      </details>

      <details name="security-group">
        <summary>HIPAA & GDPR Compliance</summary>
        <div class="content">
          <p>Business Associate Agreements (BAAs) available with end-to-end data encryption at rest and in transit.</p>
        </div>
      </details>
    </div>
  </div>

</body>
</html>

Why this works:

Group 1 items share name="infra-group". Group 2 items share name="security-group".
The browser independently tracks exclusivity for each name group. Opening a security section leaves the infrastructure section untouched, while toggling items inside the same group guarantees only one is open at a time.

⚠️ Common Pitfalls

Mismatched Group Names: Accordion exclusivity relies on strict string matching of the name attribute. A typo like name="faq" on one and name="faqs" on another will break exclusivity.
Using Non-Standard JavaScript Click Handlers on Named Details: If you attach custom click handlers that call e.preventDefault(), you may interfere with the browser's native mutual-exclusion state updates.
Assuming name Prevents All Items From Closing: Unlike radio buttons (<input type="radio">) which must have one item checked, <details name="..."> allows the user to close all items in the group if desired.

💡 Pro Tips

Find-in-Page Integration: Because <details> natively supports beforematch, users searching with Ctrl+F will automatically expand the correct accordion pane, delivering superior UX over custom React/Vue accordion libraries.
Check Browser Baseline: The name attribute on <details> is supported across modern baseline browsers (Chrome 120+, Safari 17.2+, Firefox 125+). For legacy browsers, a tiny 5-line JS polyfill can query [name] attributes on toggle events.

📌 Key Takeaways

The name attribute on <details> creates native exclusive accordions with zero JavaScript.
Opening one named <details> automatically collapses any other open <details> sharing that same name.
Multiple independent accordion groups can coexist on the same page by using different name values.
Native <details> automatically expands when browser search matches text inside (beforematch event).
Users can still collapse all items in a group if they wish.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

How do you create an exclusive accordion (where opening one item automatically closes others) in modern standards-compliant HTML without JavaScript?

Topic: HTML Fundamentals

? Question 2 / 3

What native browser event is fired when a user's in-page search (`Ctrl+F`) discovers text inside a collapsed `<details>` element?

Topic: HTML Fundamentals

? Question 3 / 3

How does `<details name="faq">` differ from `<input type="radio" name="faq">` regarding closure?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The name Attribute on <details>

In-Page Find (Ctrl+F) & the beforematch Event

Pure HTML vs Legacy JavaScript Accordion Comparison

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Enterprise Product Feature Matrix

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

How do you create an exclusive accordion (where opening one item automatically closes others) in modern standards-compliant HTML without JavaScript?

What native browser event is fired when a user's in-page search (Ctrl+F) discovers text inside a collapsed <details> element?

How does <details name="faq"> differ from <input type="radio" name="faq"> regarding closure?

The `name` Attribute on `<details>`

In-Page Find (`Ctrl+F`) & the `beforematch` Event

What native browser event is fired when a user's in-page search (`Ctrl+F`) discovers text inside a collapsed `<details>` element?

How does `<details name="faq">` differ from `<input type="radio" name="faq">` regarding closure?