Leonardo Devai
145294f84f
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24, Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login, self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the blog series, safe markdown links in the frontends, and many smaller bugs — every project was built, run and exercised end to end. Adds scripts/publish.sh + a CI publish job that splits every folder into its own repo at git.devai.io/templates/<folder>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
# faq-accordion
|
|
|
|
A classic FAQ: click a question and its answer slides open while the others
|
|
close. It teaches showing and hiding content the accessible way — real
|
|
`<button>`s, `aria-expanded`, and a pure-CSS animation.
|
|
|
|
## Run
|
|
|
|
Get it: `git clone https://git.devai.io/templates/faq-accordion.git`
|
|
|
|
Double-click `index.html` — it opens in your browser and works. Nothing to
|
|
install, no build step.
|
|
|
|
Or serve it like production:
|
|
|
|
```sh
|
|
docker compose up --build
|
|
```
|
|
|
|
Then open http://localhost:8080.
|
|
|
|
## How it works
|
|
|
|
Each question is a real `<button>`, so mouse, touch and keyboard (Tab, then
|
|
Enter or Space) all work without extra code. Its `aria-expanded` attribute is
|
|
the state: screen readers announce it, and `aria-controls` points at the answer
|
|
it opens.
|
|
|
|
On click, `app.js` closes every item, then opens the one you clicked (unless it
|
|
was already open). Opening means two things: set `aria-expanded="true"`, and
|
|
add an `open` class to the item. The CSS does the rest — the answer animates
|
|
`max-height` from `0` to `200px`, and `visibility: hidden` keeps closed answers
|
|
out of reach of screen readers and the Tab key.
|
|
|
|
Try it: let several answers stay open by deleting `questions.forEach(close)`,
|
|
open the first one on load with `open(questions[0])`, or add a question by
|
|
copying an `.item` block (with a new `id` / `aria-controls` pair).
|
|
|
|
## Layout
|
|
|
|
```
|
|
index.html the questions and answers
|
|
app.js open(), close() and the click handler
|
|
styles.css the look and the slide animation; follows light or dark mode
|
|
```
|
|
|
|
## Deploy
|
|
|
|
Push to your own GitHub repo and the shipped workflow
|
|
(`.github/workflows/ci.yml`) tests the compose stack, publishes the image to
|
|
GHCR, and — once you set the `DEPLOY_HOST` / `DEPLOY_USER` variables and
|
|
`DEPLOY_KEY` secret — deploys it to your server over ssh.
|
|
|
|
---
|
|
Part of [devai.io](https://devai.io) — the Web Basics track: HTML, CSS &
|
|
JavaScript, one concept at a time. Next up:
|
|
[stopwatch](https://git.devai.io/templates/stopwatch).
|