- Published
- Byline
- GoHighLevel Partners Editorial
- Filed under
- GoHighLevel Automation
The test is not aesthetic — it is whether a reader can tell from the heading alone whether the answer inside is the one they need.
The accordion FAQ element: when collapsing answers helps, and when it hides
An accordion turns a long list of questions into a short list of headings that expand on click. On a page with a dozen genuine questions it is the right element: the reader scans the headings, opens the one that applies, and is not made to wade through eleven answers that do not.
Used badly it becomes a place to put content nobody wants anyone to read. The distinction is not aesthetic. It is whether the reader can tell, from the heading alone, whether the answer inside is the one they need.
The headings are the element
A collapsed accordion shows only its headings, so those headings carry the entire navigational load. Write them as the question a customer would actually ask, in their words, and make each one distinguishable from the others at a glance.
| Heading style | What the reader can do |
|---|---|
| “Delivery” | Guess. It might be cost, timing, area or returns |
| “How much does delivery cost?” | Open it, or skip it, correctly |
| “Do you deliver to my area?” | Recognise their own situation immediately |
| “Information about our services” | Nothing — this is a heading with no content in it |
Single-noun headings are the common failure. They save space in a design mockup and cost the reader the ability to choose, which is the only thing an accordion is for.
What belongs inside, and what does not
- Genuine recurring questions. The ones support actually answers, in the words people use to ask them.
- Detail a minority needs. Specifications, edge cases, eligibility conditions — content that is essential to some readers and noise to the rest.
- Not the main argument. Anything a visitor needs in order to decide belongs in the open page. A key benefit hidden behind a click is a benefit most readers will never see.
- Not the terms that change what they are buying. Cancellation conditions, minimum terms and what happens about returns should be visible. The same reasoning applies to shipping rates at checkout: a cost discovered late is worse than a cost stated plainly.
- Not invented questions. A FAQ padded with questions nobody asks reads as marketing copy in a costume, and it buries the real ones.
Behaviour worth getting right
Decide whether more than one can be open. Allowing several is usually kinder — a reader comparing two answers should not have to keep reopening. Forcing one at a time is only correct when the panels are long enough that several open at once become unreadable.
Make the whole heading row clickable, not just a small chevron, and make it operable from a keyboard. An accordion that only responds to a mouse excludes a real group of readers and is trivially avoidable.
Show the state clearly. A visitor should be able to tell at a glance which panels are open, without inspecting the spacing.
Keep it out of the way of fixed elements. An expanding panel underneath a sticky bar can push its own heading out of view as it opens, which is one of the interactions described in sticky header behaviour and height.
Test it on a phone. This is where accordions earn most of their value, because vertical space is scarce, and also where they most often break — long headings wrap into three lines, and expanded panels push everything below them far down the page. The reordering in how a phone stacks your columns applies here as much as anywhere.
Search engines, and a persistent myth
Content inside a collapsed panel is present in the page. It is not hidden from a crawler in the way people sometimes assume, provided it is genuinely in the markup rather than fetched only when the panel is opened. The distinction that matters is that one: content loaded on demand may not be seen at all, while content present and merely collapsed generally is.
What does change is the reader’s experience, and that is the honest reason to be careful about what you collapse. If a piece of information is important enough to want it counted, it is important enough to be visible.
Structured markup for questions and answers is a separate matter from the accordion, and it should describe what is actually on the page. Marking up questions that do not appear, or that appear with different answers, is the sort of mismatch worth avoiding on principle as well as practice.
The performance question
An accordion is a heading, a panel and a class toggle. It does not need a library, and pulling one in for this element alone is a poor trade against the measurements in what a page speed score measures. Where a builder’s own component is used, check what it loads — several of them carry a general-purpose animation dependency that is larger than the entire section it animates. Anything added through code in the page header to make an accordion work is worth questioning for the same reason.
Where it belongs on a page
An FAQ section usually sits near the end, after the argument has been made, where it does the job of answering the objections that survived. On a what an offer page has to answer that means eligibility, time commitment and refunds; on a product detail page structure it means specifications, compatibility and delivery.
Inside a popup there is rarely room for one — inline and popup placement covers what each placement can carry — and on the thank-you step an accordion of “what happens next” answers is a reasonable use, since the visitor has already committed and is looking for specifics.
Whether collapsing helps at all on a given page is measurable rather than a matter of taste. Open versus collapsed is a structural difference, the metric is whatever the page is for, and the method is in split testing. As with the progress bar element, the element is only worth its complexity when it is telling the reader something true about what is behind it.
Frequently Asked Questions
When is an accordion the right element for a FAQ?
When there are enough genuine questions that reading all the answers would be a burden, and the headings are specific enough that a reader can tell which one applies to them. If the headings are single nouns like ‘Delivery’, the reader cannot choose, which is the only thing an accordion is for.
What should not go inside a collapsed panel?
Anything a visitor needs in order to decide. A key benefit behind a click is one most readers will never see. Terms that change what someone is buying — cancellation conditions, minimum terms, delivery costs — should be visible rather than collapsed.
Is content in a collapsed accordion hidden from search engines?
Not if it is genuinely in the page markup rather than fetched only when the panel is opened. That is the distinction that matters: content loaded on demand may not be seen at all, while content present and merely collapsed generally is.
Should more than one panel be open at a time?
Usually yes. A reader comparing two answers should not have to keep reopening them. Forcing one at a time is only correct when panels are long enough that several open together become unreadable.
Does an accordion need a JavaScript library?
No. It is a heading, a panel and a class toggle. Pulling in a library for this element alone is a poor trade, and some builder components carry a general-purpose animation dependency larger than the section it animates.
Where should a FAQ section sit on the page?
Usually near the end, after the argument has been made, where it answers the objections that survived it. On an offer page that means eligibility, time commitment and refunds; on a product page it means specifications, compatibility and delivery.
We build your GoHighLevel account for you
CRM, pipelines, funnels, SMS and automation — configured for your business, not left for you to figure out.
- Setup (one-time)$850
- Ongoing (per month)$38.80
No obligation quote · reply within 1 business day
This site is independently operated and is not officially affiliated with, endorsed by, or sponsored by HighLevel LLC. We do not receive referral commissions — this is our own flat-fee implementation service.