Click
to reveal.
Tabs, accordions, flip cards — the family of patterns that hide content behind a click. They make a page feel interactive without forcing the learner to read everything. Used right, they chunk content well. Used wrong, they hide important information learners never come back to.
Chunking optional or supplementary content.
Click-to-reveal patterns are best for content that's relevant but not essential — depth, examples, supplementary detail. The click is the learner's choice to engage. If they don't click, they don't miss anything they had to know.
- FAQs grouped under a single page.
- Examples that illustrate a principle but aren't required.
- Long-form content broken into navigable sections.
- Term-to-definition pairs in glossaries or vocabulary checks.
Hiding required content from learners.
If learners must read it, don't hide it behind a click. The same warning that applies to carousels applies here: most learners won't open every accordion, won't flip every card, won't visit every tab. Reserve the format for content that genuinely is optional.
- Compliance content that must be acknowledged.
- Information needed for an upcoming quiz.
- Content that should sit in the flow of reading.
- Mobile pages where stacking would be just as good.
Three patterns.
The three most-used click-to-reveal patterns in eLearning. Tabs for related parallel content. Accordions for sequential or FAQ-style content. Flip cards for term-and-definition pairs.
For three or four parallel options where the learner is likely to pick one or compare across them. The first tab is open by default.
A tab is a horizontal selector for one of several parallel content panels. The selected tab is visually distinct and its panel is the only one visible.
Browser tabs are the obvious example. Settings panels with categories ("General / Appearance / Privacy") are another. Documentation pages with language toggles ("JavaScript / Python / Ruby") use them well.
Tabs for content that should be read sequentially. Tabs with five or more options on mobile (they wrap or scroll horizontally and become unusable). Tabs where the label doesn't tell you what's inside.
For lists of items where the learner may want to expand some but not all — typically FAQs, definitions, or grouped explanations. All collapsed by default.
When are accordions the right choice?
When the items are independent of each other, the learner doesn't need to read all of them, and the content under each item is substantial enough to warrant being hidden.
Should multiple accordion items be open at once?
Almost always yes. Single-open accordions ("opening B closes A") are frustrating when the learner wants to compare two items. The native HTML <details> element allows multiple open by default, which is usually the right behaviour.
How many items is too many?
Beyond 10-15 items, the wall of collapsed summaries becomes overwhelming. Group into sections, add a search input, or split across multiple pages. An accordion of 50 items is just a list pretending to be interactive.
For paired content where the back of the card is short — term-and-definition, question-and-answer, before-and-after. Click any card to flip it.
Three patterns, three jobs. Tabs are for picking one. Accordion is for expanding some. Flip cards are for paired content. Don't mix them on the same screen — the learner has to relearn the interaction every time.
Get the visuals right.
Affordance is everything
The learner has to know that something will happen when they click. Tabs need a clear "this one is active" state. Accordion items need a chevron or "+" icon. Flip cards need a hover-lift or shadow that says "this is interactive." Without an affordance, the pattern becomes invisible.
Default state matters
Tabs: the first tab is open. Accordions: all collapsed (unless the first item is essential). Flip cards: all showing the front. The default should match what's most useful at a glance, and what behaves consistently with what learners expect from the pattern.
Animate the transitions, gently
Tabs cross-fade. Accordion items slide open. Flip cards rotate. The animation should be quick (150-300ms) and communicate the change without forcing a wait. Snappy beats elaborate.
Accessibility — semantic structure
Tabs need role="tablist", role="tab", and role="tabpanel" with proper aria-controls wiring. Accordions are best built with the native <details> and <summary> elements. Flip cards should be <button> elements with a clear aria-label.
Accessibility — keyboard
Tabs: arrow keys move between tabs, Tab focuses the active panel. Accordions: native <details> handles Enter and Space natively. Flip cards: focusable, Enter or Space flips, focus stays on the card.
Mobile: prefer accordion over tabs
Tabs collapse poorly on narrow screens. Accordions stack naturally. If your tabs have more than 3 short labels, consider switching to accordion on mobile breakpoints. Tab strips that wrap to two lines, or scroll horizontally, are usability failures.
How to use click-to-reveal well.
Match the pattern to the content shape.
Three or four parallel sections that the learner might pick between = tabs. A list of independent items that learners may dip into = accordion. Paired short content (term and definition, question and answer) = flip cards. Picking the wrong pattern for the content makes everything harder than it needs to be.
Don't bury the most important content.
If the second tab contains the critical example and most learners only see the first tab, you've hidden the lesson. Lead with the highest-value content. If the order is fixed (steps, sequences), think about whether tabs are the right pattern at all — sequential content often wants navigation buttons or a stacked layout.
Write labels that tell the learner what's inside.
"Tab 1 / Tab 2 / Tab 3" tells nobody anything. "Definitions / Examples / Anti-patterns" tells learners which one to click for what they need. Accordion summaries follow the same rule — write the summary so the learner can decide whether to open it without opening it.
Keep accordion content short.
If each accordion item contains three paragraphs of essential content, the accordion is hiding too much. The pattern works when the content under each summary is brief — a paragraph, a list, a short explanation. Long content inside accordions invites learners to skim or skip.
Flip cards: only when the back is short.
If the back of the card needs scrolling, it shouldn't be a flip card. The pattern is for paired short content — a term and its definition, a question and a one-line answer. Flip cards with long content on the back fail because the learner can't see both faces at once.
Don't gate progress on every click.
Some courses lock the Next button until every tab has been opened, every accordion expanded, every card flipped. This is a sign that the content shouldn't be hidden in the first place — if it's required, show it directly. Click-gating frustrates learners and turns the course into a click-hunt.
Decide whether state persists.
If the learner expands three accordion items, navigates to the next scene, and comes back — should the accordions still be open? Usually yes, for orientation. Definitely yes if you've bookmarked the course mid-progress. Resetting state every visit feels punishing.
When you'd reach for click-to-reveal.
Glossaries and vocabulary checks
Flip cards: term on the front, definition on the back. Self-paced review of vocabulary. Easy, well-suited to the format, and one of the few cases where flip cards genuinely beat other patterns.
FAQ-style support content
Accordion of common questions and answers. Each item independent, learners pick the ones relevant to them. Standard pattern on knowledge-base pages and support modules.
Comparing approaches or options
Tabs: "Approach A / Approach B / Approach C", each with a short description. The learner picks one to consider in depth, or switches between them to compare.
Optional examples or case studies
Accordion or tabs for "Want a deeper example? Click here." Lets confident learners skip ahead while giving those who want detail a way in.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.