Collapsible Content

HTML5 provides built-in elements for collapsible content that require no JavaScript and work across all modern browsers:

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and appears when the user clicks the summary.</p>
</details>

Pay attention for several points:

1. The clickable element must carry the hook class rd-js-collapsible (keep a separate presentational class like .collapsible-trigger for styling — hooks are never styled)
2. The content element must carry the hook class rd-js-collapsible-content, or be targeted explicitly via aria-controls + id
3. Optional: icon element with class .collapsible-icon — rotated by CSS when open, no glyph swapping
4. The content must be hidden by default via CSS (display: none; ) and shown by the state class the script toggles: .rd-is-open { display: block; }
5. The script mirrors open/closed state to aria-expanded on the trigger. A <button> trigger is preferred; for any other element the script adds tabindex="0" + role="button" and handles Enter / Space, so keyboard access works either way

document.addEventListener('DOMContentLoaded', function() {
    // Resolve the content element for a trigger:
    // 1. explicit aria-controls id, 2. trigger's next sibling, 3. trigger's parent's next sibling
    function resolveContent(trigger) {
        const id = trigger.getAttribute('aria-controls');
        if (id) {
            const byId = document.getElementById(id);
            if (byId) return byId;
        }

        const sibling = trigger.nextElementSibling;
        if (sibling && sibling.classList.contains('rd-js-collapsible-content')) {
            return sibling;
        }

        const parentSibling = trigger.parentElement && trigger.parentElement.nextElementSibling;
        if (parentSibling && parentSibling.classList.contains('rd-js-collapsible-content')) {
            return parentSibling;
        }

        return null;
    }

    document.querySelectorAll('.rd-js-collapsible').forEach(trigger => {
        const content = resolveContent(trigger);
        if (!content) return;

        // Initialize ARIA from the authored state
        const isOpen = content.classList.contains('rd-is-open');
        trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        if (content.id && !trigger.getAttribute('aria-controls')) {
            trigger.setAttribute('aria-controls', content.id);
        }

        function toggle() {
            const open = content.classList.toggle('rd-is-open');
            trigger.classList.toggle('rd-is-open', open);
            trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
        }

        trigger.addEventListener('click', toggle);

        // Keyboard access when the trigger is not a native button:
        // make it focusable and respond to Enter / Space
        if (trigger.tagName !== 'BUTTON') {
            if (!trigger.hasAttribute('tabindex')) trigger.setAttribute('tabindex', '0');
            if (!trigger.hasAttribute('role')) trigger.setAttribute('role', 'button');
            trigger.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    toggle();
                }
            });
        }
    });
});