AI Accordion Generator.

Create an FAQ accordion with six items in single-open mode, where opening one item closes the currently open one. Each header is a full-width button carrying the question in 16px semibold text with a chevron on the right that rotates 180 degrees over 200ms; set aria-expanded on the button and aria-controls pointing at the panel, and give the panel role="region" with aria-labelledby back to the header id. Animate the panel with grid-template-rows from 0fr to 1fr so long answers never clip and short ones do not ease for the same duration. Enter and Space toggle, Tab moves between headers normally since each is its own tab stop, and a visible focus-visible ring is required. Allow the open item to be collapsed so no panel is forced open.

Create a multi-open accordion where any number of panels may be expanded at once, holding open ids in a set rather than a single value. Add an Expand all and Collapse all control above the stack whose label reflects the current state, and make it a real button with aria-expanded describing the group. Each header is a button with aria-expanded and aria-controls; each panel is role="region" with aria-labelledby. Animate with grid-template-rows 0fr to 1fr so several simultaneous transitions do not fight a shared max-height. Preserve panel scroll position and any half-filled form fields by keeping panels in the DOM and toggling the hidden attribute rather than unmounting them. Enter and Space toggle the focused header.

Create an accordion using native details and summary elements with no JavaScript at all. Give each details the same name attribute so the browser enforces exclusive-open behavior natively. Style the summary as a full-width row with 20px vertical padding, remove the default marker with list-style: none and ::-webkit-details-marker, and add a custom chevron that rotates using the details[open] selector. Animate the panel with interpolate-size: allow-keywords plus a height transition from 0 to auto, and add ::details-content to the transition so the reveal is smooth where supported and an instant open elsewhere. Keep a visible focus ring on the summary and ensure find-in-page still expands a closed panel.

Create an accordion where each item is addressable by URL hash. Give every header a stable slug id derived from its question, and on mount read location.hash, open the matching panel, and scroll it into view with scroll-margin-top of 96px so it does not land underneath a sticky header. Update the hash on open using history.replaceState so the back button is not filled with toggles, and listen for hashchange so in-page links work after the first render. Add a small copy-link button inside each header row that writes the absolute URL to the clipboard and swaps its label to Copied for two seconds; stop its click from bubbling to the header button so copying does not also collapse the panel.

Create an FAQ accordion that renders both the interactive panels and a matching FAQPage JSON-LD script from the same array of question and answer objects, so the two cannot drift apart when someone edits a question. Emit the JSON-LD server-side in a script tag with type="application/ld+json", using Question and Answer entities with acceptedAnswer text. Render every answer into the HTML even while collapsed, hiding it with CSS rather than fetching it on click, since content injected after a click may never be crawled. Keep the accessible pattern intact: header buttons with aria-expanded and aria-controls, panels as role="region" with aria-labelledby, and a grid-template-rows height animation.

Create a nested accordion two levels deep: outer groups such as Security, Integrations and Support, each containing three to five child items. Indent child headers by 20px, drop their type size by one step, and keep every level as its own button with aria-expanded and aria-controls, panels as role="region" with aria-labelledby — do not use a treeview role, since these are disclosures, not a tree. Outer groups are multi-open and children are single-open within their parent. When a parent collapses, remember which children were open so reopening the parent restores that state rather than resetting it, and make sure the parent panel height animation accounts for children expanding after the parent has settled.