Dual Column Accordion FAQ Block for Solid

Edit CLASSES and STUDIO at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_CLASSES and OPEN_STUDIO name the question open in each list on load; set one to an id that doesn't exist to start with that list closed. Keep each list to about four: past that, a column gets long next to its neighbour. Each list opens one answer at a time. Add multiple to the Accordion to let several stay open.

Yes. Each Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all 8, and closing an answer doesn't remove it.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every question. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. Tab then continues into the second list. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

It is a ghost button with an arrow (href="#"): point See class dates at your schedule. The block has no other button, and the Shine Button is left for a page's one main action. The button's asChild receives its props: spread them onto your router's link.

The header and the band fade up once when the page loads, with CSS transitions, and a chevron turns over as an answer opens. With reduced motion the entrances are off. The answers also open and close at once, with no height animation.

Below the lg breakpoint the two lists stack, with a rule and + marks between them where the divider was, and the rows run from rail to rail. A question that doesn't fit wraps to a second line with its chevron beside the first, and nothing scrolls sideways at 320 pixels.