Accordion (Multiple Items, Open)

These accessible accordions are built with the details element:

<details>
    <summary>
      Title
    </summary>
    <p>
      Content...
    </p>
</details>

Notes

• To enable multiple accordions, add the data-group attribute, e.g. data-group="accordion". When any <details> in a group opens, any others in the same group automatically close.
• Hardcode open on any details element to have that accordion open on page load, i.e. <details open>.
• Accordions can be nested.

• Responsive-aware: Transitions are only applied on viewports wider than 37.5rem (600px), avoiding layout issues caused by wrapped summary text on smaller screens.
• Respects user preferences: Honors prefers-reduced-motion to avoid animating for users who have motion reduction enabled.
• Feature detection: Uses @supports to apply styles only if the browser supports the experimental interpolate-size property.
• Safe fallback: Older browsers that don't support modern syntax will ignore the transition block entirely, without affecting functionality.

The CSS snippet enhances the accordions with a smooth height transition - but only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.

Styles are applied only when:

• The screen width is greater than 37.5rem (600px). (Note: width is modern range syntax.)
• The user has not requested reduced motion.
• The browser supports the experimental interpolate-size property (some browsers may ignore this block if they don't support it).

If the browser does support it, interpolate-size is applied globally with a value of allow-keywords. (his is a proposed property allowing height/width interpolation on elements like <details>, which normally don't transition well.)

This allows a transition from height: [n] to height: auto.

• details.js: Handles <details> accessibility and behavior.
  • Syncs aria-expanded between <summary> and <details>.
  • Closes dropdowns when clicking outside navigation.
  • Supports closing via the Escape key and restores focus.
  • Implements grouped accordion behavior using the data-group attribute: when one <details> in a group opens, any others in the same group automatically close.
• hamburger-button.js: Toggles the mobile navigation menu.
  • Updates aria-expanded on the button.
  • Switches between hidden/visible menu states.
  • Updates the visually hidden text for screen readers.

• The site is fully navigable using tab keys and up/down arrows.
• ARIA attributes are dynamically added to the details element to signal whether it is open or closed.

The application has been tested on the following platforms and browsers:

• Operating System: Windows 10
• Browsers:
  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge

Device View Testing

The layout and functionality have been verified in both browser and device simulation views to ensure responsiveness and usability.

1. Clone or download the repository to your local machine.
2. Open the project folder and start a simple HTTP server (e.g., using Live Server in VS Code or Python's http.server module).
3. Open the project in a modern browser (e.g., Chrome, Firefox, or Edge).