Comment

Comment by shakna

Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies.

The details element.

    <details>
        <summary>Menu</summary>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/thing">Thing</a></li>
        </ul>
    </details>
You may want to add a tiny bit of CSS, like adding a border, and setting the cursor to a pointer, for your sighted users:

    details {
        padding: 0.5em;
        border-style: solid;
        border-width: 1px;
        border-radius: 0.25em;
        cursor: pointer;
    }
parent shakna 3 years ago

Discussion

Live from the official Hacker News API

A modern reader for Hacker News · SvelteKit + Skeleton