--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/faq-page' title: 'Build an FAQ page | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Collapsible question and answer sections' tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Build an FAQ page' description: 'Collapsible question and answer sections' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/faq-page' articleSection: 'Follow a tutorial' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/faq-page' description: 'Collapsible question and answer sections' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build an FAQ page. Collapsible question and answer sections Learn DXPR BuilderBuild pagesFollow a tutorial ## In this guide Related guides - [Collapsibles](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) - [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [Contact page](/hc/documentation/learn-dxpr-builder/tutorials/contact-page) - [Knowledge base](/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) Here you build an FAQ page where each question opens and closes on click. You end with a centred heading, a category of questions in a collapse panel and a contact call to action. Use it for a short list of common questions. For help articles grouped by topic, follow [Build a knowledge base](/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) instead. The video builds the FAQ of a health clinic. ## Before you start - Your role has the **Edit with DXPR Builder** permission. - The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**. - New elements and new toggles land at the top of their container. Add questions from the last to the first, or drag them into place afterwards. ## Step 1: add the header 1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. 2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**, then click **Save**. 3. Click **+** on the section and pick **Text** from the **Content** tab. 4. Type "Frequently asked questions" and set it to **Heading 2** from the toolbar. Add one line that says what the page covers, then click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2). ## Step 2: add a category with questions 1. Hover the section and click **Add Section Below**. 2. Click **+** on the new section and pick **Collapse panel** from the **Layout** tab; it arrives with one empty toggle. 3. Open **More** > **Settings** on the panel. Switch on **Collapse** so every question starts closed, set **Expand icon** to **+**, then click **Save**. 4. Open **More** > **Settings** on the toggle, type the question as its **Toggle title** and click **Save**. New toggles land at the top, so start with the last question. 5. Click the question to open its body, click **+** inside it and pick **Text**. Type the answer and click **Save**. 6. Click **Add toggle** on the panel and repeat steps 4 and 5 for each question, working up to the first. 7. Click **+** on the section once more and pick **Text**; it lands above the panel. Type the category name as **Heading 2** and click **Save**. Aim for 3 to 6 questions per category. ## Step 3: add a contact call to action 1. Add a third section with **Add Section Below** and open its **More** > **Settings**. Pick **Align text center** under **HTML classes** and a light grey **Background** in the **Style** panel. Click **Save**. 2. Click **+** on the section and pick **Button**. Set **Title** to "Contact us", **Link** to `/contact`, **Type** to **Primary** and **Size** to **Large**, then click **Save**. 3. Click **+** again and pick **Text**; it lands above the button. Type "Still have questions?" as **Heading 2**, add one line that points to your team, then click **Save**. ## Step 4: save and preview 1. Click **Save** on the builder toolbar. 2. Open the view menu (the **eye icon**) and choose **Preview**. ## Go further Not shown in the video: - **More categories**: repeat Step 2 for each category, one section and one collapse panel each. Common ones are Getting started, Account and billing, Features, Troubleshooting, and Privacy and security. - **Tabs instead of sections**: with few categories, add a **Tabs** element from the **Layout** tab, one tab per category, and place a collapse panel inside each tab. Every category stays in reach without scrolling. ## SEO tips - Use the real question as the **Toggle title** - Answer in the first sentence, then add detail - Link answers to the page they refer to - Add FAQ structured data through your theme or a Drupal module ## What you see The heading sits centred at the top. Under the category heading every question is closed and shows a **+**. A click opens the answer, and the closing band offers the **Contact us** button. ## If you don't see the page as shown - **All the questions start open.** **Collapse** is off on the collapse panel. Open the panel's **More** > **Settings**, switch on **Collapse** and click **Save**. - **There is no + inside a toggle.** The toggle's body is closed. Click the question to open it, then click **+** inside. - **The questions appear in the wrong order.** New toggles land at the top of the panel. Drag each toggle into place by the drag handle on its control bar. - **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails). ## What's next? - [Collapsibles element](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) for every collapse panel setting - [Tabs element](/hc/documentation/learn-dxpr-builder/layout/tabs-element) for tabbed layouts - [Contact page](/hc/documentation/learn-dxpr-builder/tutorials/contact-page) for the page the button links to - [Knowledge base](/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) to build help sections with more structure