v133 · dom

Settings Accordion

A multi-section settings panel built with native <details> elements. :open drives the chevron rotation, the active-dot state, the row background, and the count-badge hide/show — all in CSS with no JS class toggling. An open-section tracker reads the browser-managed [open] attribute.

Feature detection: checking…
Settings :open drives chevron, dot, bg — no JS class
open: none
👤 Account 3 settings ▶
Two-factor authenticationRequire 2FA on every login
Email notificationsReceive account alerts by email
Session timeoutAuto-sign-out after inactivity
🎨 Appearance 4 settings ▶
Dark modeUse dark background
Compact layoutReduce whitespace throughout the UI
Font sizeAdjust base text size
AnimationsEnable UI motion effects
🔒 Privacy 3 settings ▶
Usage analyticsHelp improve the product with anonymous data
Third-party cookiesAllow cross-site tracking cookies
Profile visibilityWho can see your public profile
🔔 Notifications 2 settings ▶
Push notificationsBrowser push alerts for activity
Digest emailsWeekly summary of activity
⚙️ Advanced 2 settings ▶
Developer modeExpose debug panels and API tools
Keyboard shortcutsEnable global hotkeys

Pre-133 vs Chrome 133+

Pre-Chrome 133
No :open selector existed for <details>. Authors had to add a toggle event listener, manually toggle a class like .is-open on the element, then style against that class. Two sources of truth: the native [open] attribute and the JS-managed class.
Chrome 133+
details:open summary { … } is a single source of truth. The browser manages the open state; CSS reads it directly. Chevron, dot, background, and badge all update on toggle with zero JavaScript. The JS below only reads [open] for the tracker label — the visual panel needs none.
/* No JS class toggling needed — :open is the single source of truth */

/* Chevron rotation */
.setting-section .summary-chevron {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
.setting-section:open .summary-chevron {
  transform: rotate(90deg);
}

/* Active dot */
.summary-status { background: transparent; }
.setting-section:open .summary-status { background: var(--text-black); }

/* Row background */
.setting-section:open summary { background: var(--bg-stone); }

/* Badge: hide when section is open */
.setting-section:open .summary-count { display: none; }

see also