Show More Expandable

A FAQ card stack that renders only the first few items by default and reveals the remaining ones behind a Show more button, for progressive disclosure on long FAQ lists. Once clicked, the button disappears and every remaining card is rendered.

By Staaarter Team

FAQ

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/show-more-expandable.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq45.tsx instead.

Usage

The file also exports faq45Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq45, faq45Demo } from "@/components/blocks/faq/faq45";

export default function Page() {
  return <Faq45 {...faq45Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Frequently asked questions"	Section heading.
description	string	none	Optional supporting copy under the heading.
faqs	FaqShowMoreItem[]	none	Full list of question/answer cards.
initialCount	number	4	Number of cards shown before the Show more button appears.
className	string	none	Extra classes for the outer section element.

Types

interface FaqShowMoreItem {
  question: string;
  answer: string;
}

Behavior notes

Real client behavior: a showAll boolean state starts false, slicing the faqs array to initialCount items; clicking Show more flips it to true and renders every item.
The Show more button is only rendered when there are more items than initialCount, and it disappears permanently once clicked (no collapse-back control).

More FAQ Blocks

View all →

collapsible-accordion

Collapsible Accordion

Stacked cards with expandable sections, for full-length answers in a compact format.

open-list-layout

Open List Layout

Questions with answers displayed directly below in a simple always-open list.

three-column-grid

Three Column Grid

Q&A pairs arranged in a responsive grid layout, always open.

tabbed-categories

Tabbed Categories

Sidebar navigation with category tabs and an accordion of that category's questions.

searchable-accordion

Searchable Accordion

Search input that filters accordion items in real-time by question and answer text.

grouped-sections

Grouped Sections

FAQs organized into titled sections, each with its own independent accordion below it.