Accordion
An accordion is a stack of headers, each opening a panel of content in place, so a page can list many topics and show only what a reader asks for. Orvain's Accordion family runs to seven: a searchable help page with counted topic tags and a vote per answer, a settings panel of folding sections, and five item shapes, boxed rows for narrow columns, a numbered column for ordered steps, a header card over a body card, a badged row holding a value worth copying, and a minimal item that is only a question until it opens.
The decision readers notice most is whether opening one item closes the rest. Closing them makes two answers impossible to compare, and comparison is exactly why somebody is reading a pricing FAQ, so allow several open unless the items are steps that only make sense one at a time. Scroll is the other thing to get right: opening a panel pushes everything below it down the page, and a reader who clicked one question can end up staring at a different one.
FAQ page
Best for
Knowledge bases and help centres: search, topics and answers on one page
Anatomy
Search field with its ⌘1 chip · Filter and a gear that keeps more than one answer open · counted topic tags · cards with a topic badge, a rich body and a helpful vote
How can we help?
Search the knowledge base or browse by topic.
Pro unlocks everything in Free plus the tools growing teams rely on. Here’s how the tiers compare:
Yes: plans are flexible and there’s no lock-in.
- Upgrades take effect immediately and we prorate the difference.
- Downgrades apply at the end of your billing cycle, so you keep Pro until then.
- Cancellations stop the next charge; your data stays accessible on Free.
You’re billed per active member. A few things worth knowing:
- Pending invites aren’t charged until accepted.
- Removing a member frees the seat instantly.
- Invoices and receipts live under
Turn on 2FA from your security settings in a few steps:
- 1Open Settings → Security.
- 2Choose Authenticator App and scan the QR code.
- 3Enter the 6-digit code to confirm, then save your backup codes.
Data is encrypted in transit (TLS 1.3) and at rest (AES-256). Pro adds SSO, audit logs and granular roles. You can export everything at any time via the API:
Deleting your workspace removes all associated data within 30 days.
Owners can hand off a workspace to another admin without downtime.
- 1Open Settings → Team & Permissions.
- 2Promote the new owner to Admin
- 3Use Transfer Ownership and confirm with your password.
Settings sections
Best for
Account and workspace panels: grouped settings that fold away
Anatomy
Grey header band with a round icon chip, title and note · white body that the header overlaps by 20px · dashed key/value rows · switches and a brand link
Two-factor authentication is enabled via an authenticator app. Review the devices signed in to your account.
Bordered items
Best for
Sidebars and narrow columns: a boxed row per question
Anatomy
12px box with a hairline and a soft 2px shadow · optional leading info mark · title that dims once open · chevron or plus, muted until you reach it
Numbered items
Best for
Onboarding and setup guides: ordered steps that open in place
Anatomy
20px number column in muted 18px · borderless row that fills and rules itself on hover · 0.8px chevron · 16px body copy
Split cards
Best for
Docs and changelogs: each step reads as its own card
Anatomy
1px frame around a header card over a body card · header overlaps the body by 20px · 20px of the body peeks while closed · numbered at 16px
Name it after the team, not the project: everything else hangs off it. You can rename it later without breaking links, and the URL follows along.
Paste a list of emails and pick one role for the whole batch. Anyone who has not accepted after seven days gets a single reminder, then the invite lapses.
Calendar, repo and chat take a minute each. Every connection is scoped to this workspace, so removing one never touches the others.
Badge items
Best for
Account settings: a status per row and a value worth copying
Anatomy
1.5px box at 16px with 21.5px of padding · faint info mark · green status badge · 32px round chevron button · key field that really copies
Receipts go to the billing contact on the day the invoice clears, with the PDF attached and a link to the full history in Settings.
Sign-in follows the verified address on the account. Changing it sends a confirmation to both the old and the new inbox.
After two failed deliveries we fall back to the backup address and flag the account so nobody loses an invoice.
Minimal items
Best for
Long-form pages: questions with nothing around them but the answer
Anatomy
No box until you hover · red plus that thins to a long minus · body indented 81px behind a 2px red rule · 16px copy at 1.5
Every export is written to the workspace drive first, then mirrored to whichever destination you connected. The copy on the drive is kept for thirty days so a failed transfer never loses the file.
Nightly, weekly and monthly runs are all available, and each one can be pointed at a different destination with its own retention window.
CSV and JSON for records, PDF for anything rendered. Large exports are split into parts and listed together under one job.
Attachment export is on the Enterprise plan.
Using Accordion
Reach for it when
- A page of independent questions where each reader has come for exactly one of them.
- Settings grouped into sections, worked on one section at a time.
- An ordered guide whose steps stay visible as a list while one of them is being read.
- Reference rows that are mostly a value, where only some of them need explaining.
Reach for something else when
- Anything every reader has to read. Folded content is content most people skip: put it on the page.
- Switching between views of the same object. Tabs keep one panel open by design and do not shove the page around.
- Three short paragraphs. The chevron costs a reader more attention than the text it is hiding.
Where it shows up
Pricing FAQ
The block under a pricing table answering what the table cannot: billing cycles, changing seat counts, what happens when a trial ends. Several open at once, because people are comparing two answers.
Help centre
A topic page where search narrows the list and each tag says how many articles sit under it. Answers open beneath their question rather than on a new page, so the result list stays on screen.
Account settings
Profile, billing and notification sections stacked in one panel, each folding shut once it is done with. A row can hold a switch, or a key with a copy button, without leaving the section.
Setup guide
Numbered steps for connecting a service, opened one at a time. The numbers survive folding, so somebody who stops halfway can still see how much of it is left.
Questions
Should more than one accordion panel be open at once?
Default to allowing it. Readers open a second item to compare it with the first, and closing the first makes that impossible. Restrict the accordion to one panel at a time only when the content is sequential, such as a setup wizard or a form split into stages, where two steps open together would suggest they can be done in either order.
Are accordions bad for search engines?
Not when the answers are in the markup. Render each panel's content into the page and hide it with state the browser understands, rather than fetching it when the header is clicked, and the text is there for a crawler and for the browser's own find-in-page. Give every header a real heading element so the questions keep their place in the document outline.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.
Accordion
An accordion is a stack of headers, each opening a panel of content in place, so a page can list many topics and show only what a reader asks for. Orvain's Accordion family runs to seven: a searchable help page with counted topic tags and a vote per answer, a settings panel of folding sections, and five item shapes, boxed rows for narrow columns, a numbered column for ordered steps, a header card over a body card, a badged row holding a value worth copying, and a minimal item that is only a question until it opens.
The decision readers notice most is whether opening one item closes the rest. Closing them makes two answers impossible to compare, and comparison is exactly why somebody is reading a pricing FAQ, so allow several open unless the items are steps that only make sense one at a time. Scroll is the other thing to get right: opening a panel pushes everything below it down the page, and a reader who clicked one question can end up staring at a different one.
FAQ page
Best for
Knowledge bases and help centres: search, topics and answers on one page
Anatomy
Search field with its ⌘1 chip · Filter and a gear that keeps more than one answer open · counted topic tags · cards with a topic badge, a rich body and a helpful vote
How can we help?
Search the knowledge base or browse by topic.
Pro unlocks everything in Free plus the tools growing teams rely on. Here’s how the tiers compare:
Yes: plans are flexible and there’s no lock-in.
- Upgrades take effect immediately and we prorate the difference.
- Downgrades apply at the end of your billing cycle, so you keep Pro until then.
- Cancellations stop the next charge; your data stays accessible on Free.
You’re billed per active member. A few things worth knowing:
- Pending invites aren’t charged until accepted.
- Removing a member frees the seat instantly.
- Invoices and receipts live under
Turn on 2FA from your security settings in a few steps:
- 1Open Settings → Security.
- 2Choose Authenticator App and scan the QR code.
- 3Enter the 6-digit code to confirm, then save your backup codes.
Data is encrypted in transit (TLS 1.3) and at rest (AES-256). Pro adds SSO, audit logs and granular roles. You can export everything at any time via the API:
Deleting your workspace removes all associated data within 30 days.
Owners can hand off a workspace to another admin without downtime.
- 1Open Settings → Team & Permissions.
- 2Promote the new owner to Admin
- 3Use Transfer Ownership and confirm with your password.
Settings sections
Best for
Account and workspace panels: grouped settings that fold away
Anatomy
Grey header band with a round icon chip, title and note · white body that the header overlaps by 20px · dashed key/value rows · switches and a brand link
Two-factor authentication is enabled via an authenticator app. Review the devices signed in to your account.
Bordered items
Best for
Sidebars and narrow columns: a boxed row per question
Anatomy
12px box with a hairline and a soft 2px shadow · optional leading info mark · title that dims once open · chevron or plus, muted until you reach it
Numbered items
Best for
Onboarding and setup guides: ordered steps that open in place
Anatomy
20px number column in muted 18px · borderless row that fills and rules itself on hover · 0.8px chevron · 16px body copy
Split cards
Best for
Docs and changelogs: each step reads as its own card
Anatomy
1px frame around a header card over a body card · header overlaps the body by 20px · 20px of the body peeks while closed · numbered at 16px
Name it after the team, not the project: everything else hangs off it. You can rename it later without breaking links, and the URL follows along.
Paste a list of emails and pick one role for the whole batch. Anyone who has not accepted after seven days gets a single reminder, then the invite lapses.
Calendar, repo and chat take a minute each. Every connection is scoped to this workspace, so removing one never touches the others.
Badge items
Best for
Account settings: a status per row and a value worth copying
Anatomy
1.5px box at 16px with 21.5px of padding · faint info mark · green status badge · 32px round chevron button · key field that really copies
Receipts go to the billing contact on the day the invoice clears, with the PDF attached and a link to the full history in Settings.
Sign-in follows the verified address on the account. Changing it sends a confirmation to both the old and the new inbox.
After two failed deliveries we fall back to the backup address and flag the account so nobody loses an invoice.
Minimal items
Best for
Long-form pages: questions with nothing around them but the answer
Anatomy
No box until you hover · red plus that thins to a long minus · body indented 81px behind a 2px red rule · 16px copy at 1.5
Every export is written to the workspace drive first, then mirrored to whichever destination you connected. The copy on the drive is kept for thirty days so a failed transfer never loses the file.
Nightly, weekly and monthly runs are all available, and each one can be pointed at a different destination with its own retention window.
CSV and JSON for records, PDF for anything rendered. Large exports are split into parts and listed together under one job.
Attachment export is on the Enterprise plan.
Using Accordion
Reach for it when
- A page of independent questions where each reader has come for exactly one of them.
- Settings grouped into sections, worked on one section at a time.
- An ordered guide whose steps stay visible as a list while one of them is being read.
- Reference rows that are mostly a value, where only some of them need explaining.
Reach for something else when
- Anything every reader has to read. Folded content is content most people skip: put it on the page.
- Switching between views of the same object. Tabs keep one panel open by design and do not shove the page around.
- Three short paragraphs. The chevron costs a reader more attention than the text it is hiding.
Where it shows up
Pricing FAQ
The block under a pricing table answering what the table cannot: billing cycles, changing seat counts, what happens when a trial ends. Several open at once, because people are comparing two answers.
Help centre
A topic page where search narrows the list and each tag says how many articles sit under it. Answers open beneath their question rather than on a new page, so the result list stays on screen.
Account settings
Profile, billing and notification sections stacked in one panel, each folding shut once it is done with. A row can hold a switch, or a key with a copy button, without leaving the section.
Setup guide
Numbered steps for connecting a service, opened one at a time. The numbers survive folding, so somebody who stops halfway can still see how much of it is left.
Questions
Should more than one accordion panel be open at once?
Default to allowing it. Readers open a second item to compare it with the first, and closing the first makes that impossible. Restrict the accordion to one panel at a time only when the content is sequential, such as a setup wizard or a form split into stages, where two steps open together would suggest they can be done in either order.
Are accordions bad for search engines?
Not when the answers are in the markup. Render each panel's content into the page and hide it with state the browser understands, rather than fetching it when the header is clicked, and the text is there for a crawler and for the browser's own find-in-page. Give every header a real heading element so the questions keep their place in the document outline.
Related blocks
All blocksBe first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.