# How to Build a Reusable Collapsible FAQ Panel | Creght Visual Documentation

> Demo Overview This tutorial walks you through building a clickable, expandable and collapsible FAQ panel component from scratch.…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/en/help.md)

[Changelog](/en/blogs.md)

[AI](/en/docs/ai/quick-create-first-website.md) [Visual](/en/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/en/docs/get-start.md)
- [How to Register for Creght](/en/docs/signup.md)
- [Creating a Project in Creght](/en/docs/create-site.md)
- [Templates](/en/docs/tpls.md)

Design

- [Using the Editor](/en/docs/editor.md)
- [Basic Operations](/en/docs/operating.md)
- [Layouts in Creght](/en/docs/layout.md)
- [Position in Creght](/en/docs/position.md)
- [Size in Creght](/en/docs/size.md)
- [Breakpoints in Creght](/en/docs/breakpoint.md)
- [Overlays](/en/docs/popover.md)
- [Components in Creght](/en/docs/components.md)
- [Adding Third-Party Fonts](/en/docs/tp-font.md)
- [Duplicate and Deep Copy](/en/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/en/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/en/docs/wxmp.md)

Site Setting

- [Page Settings](/en/docs/page-setting.md)
- [How to Upgrade a Plan](/en/docs/manage-plan.md)
- [SEO Settings](/en/docs/seo-setting.md)
- [Small Files (Site Verification)](/en/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/en/docs/custom-domain.md)
- [How to Complete ICP Filing](/en/docs/beian.md)
- [Server Nodes](/en/docs/website-node.md)
- [How to Switch Sites](/en/docs/pxrp79jqtnyq.md)
- [Localization](/en/docs/localization.md)

AI

- [About Creght AI](/en/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/en/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/en/docs/figma-autolayout.md)
- [Covert Figma to live website](/en/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/en/docs/figma03.md)
- [Compressing Video with FFmpeg](/en/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/en/docs/clarity.md)
- [Creating a Button Hover Effect](/en/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/en/docs/collapse.md)
- [Responsive Navigation Tutorial](/en/docs/nav.md)

Tool/

# How to Build a Reusable Collapsible FAQ Panel

## Demo Overview

This tutorial walks you through building a **clickable, expandable and collapsible FAQ panel component** from scratch. You will also turn it into a **reusable component structure** suitable for FAQs, help centers, and similar use cases.

## Step 1: Create the Component

1. Select the layer that contains the **item**.
2. Right-click, create a component, and name it `FAQItem`.

As shown below:

![image.png](https://fsu.creght.com/user/3/mmLaHiQEvfx__image.png)

## Step 2: Set Up Component Variants (Collapsed / Expanded)

### 1\. Adjust the Base Component Structure

- Select the outermost component.
- Set its height to **Auto**.

![image.png](https://fsu.creght.com/user/3/mmLaHkkUekO__image.png)

### 2\. Configure the Default Variant (Collapsed State)

In the Default variant:

- Set the visibility of the **answer text** and **divider** to **Off**.
- Remove the background style from the root component.

![image.png](https://fsu.creght.com/user/3/mmLaHlyUjcP__image.png)

### 3\. Add an Expanded Variant

1. Add a new component variant.

![image.png](https://fsu.creght.com/user/3/mmLaHmDIfhB__image.png)

2. In Variant 1:
   - Set the visibility of the **answer text** and **divider** to **On**.
   - Add a **light purple background** to the component.

     ![image.png](https://fsu.creght.com/user/3/mmLaHnPkSRx__image.png)
3. Select the **arrow icon** and rotate it **180°** to indicate the expanded state.

![image.png](https://fsu.creght.com/user/3/mmLaHpdurmb__image.png)


## Step 3: Add Interaction Logic

### 1\. Collapsed → Expanded

- In the **Default variant**, select the title group.
- Click the **“+” under Interactions** in the right panel and choose **Variant**.

![image.png](https://fsu.creght.com/user/3/mmLaHqnJkSz__image.png)

- Choose **Click** as the trigger.
- Set the target variant to **Variant 1**.

![image.png](https://fsu.creght.com/user/3/mmLaHsMAzwq__image.png)


### 2\. Expanded → Collapsed

- In **Variant 1**, select the title group.
- Adjust the click interaction.
- Set the target variant to **Default**.

![image.png](https://fsu.creght.com/user/3/mmLaHtSmiHp__image.png)


## Preview the Result

Preview the page. Clicking the title should now expand and collapse the content.

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaRafmWWH__preview_02.gif)

## Make the Component Highly Reusable

### 1\. Turn the Copy into Variables

### Title Text

1. Select the title text component.
2. In the text properties, click **“+” → Create Variable**.

![image.png](https://fsu.creght.com/user/3/mmLaHuZnoSm__image.png)


After creation, the title is bound to a text variable:

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaLiGyqDb__image.png)

Click the blue variable name to rename it to something more meaningful, such as Title:

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaLNdLpXQ__image.png)

### Answer Text

- Select the **answer text component** in the Default state.
- Create a text variable in the same way, such as Answer.

![image.png](https://fsu.creght.com/user/3/mmLaHwCBZTS__image.png)


### 2\. Configure Component Content on the Page

1. Return to the page.
2. Select the **FAQItem** component.
3. In the component properties on the right, you will see two configurable fields: **Title** and **Answer**.

![image.png](https://fsu.creght.com/user/3/mmLaHxLozKU__image.png)


After changing the title, the page content updates automatically:

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaNadhYOU__image.png)

### 3\. Reuse It for Other Questions

1. Select another question group.
2. Right-click → **Replace with Component** → choose **FAQItem**.

![image.png](https://fsu.creght.com/user/3/mmLaHzDSmuR__image.png)


Then simply update the corresponding title and answer:

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaNWmamjl__image.png)

Repeat the same process for the remaining questions.

## Summary

By combining components, variants, interactions, and text variables:

- You can quickly build a **click-to-expand collapsible panel**.
- All styles are maintained centrally while content remains configurable.
- Future component changes only need to be made once, and every instance on the page updates automatically.

You now have a **highly reusable and easy-to-maintain collapsible FAQ component** 🚀

On this page

- [Demo Overview](#heading-52k91stfx)
- [Step 1: Create the Component](#heading-cy7aslsrf)
- [Step 2: Set Up Component Variants (Collapsed / Expanded)](#heading-9665u6rl7)
- [1\. Adjust the Base Component Structure](#heading-qehj0n1y6)
- [2\. Configure the Default Variant (Collapsed State)](#heading-kgozp4eja)
- [3\. Add an Expanded Variant](#heading-inp0h1d3t)
- [Step 3: Add Interaction Logic](#heading-nzb13b4k9)
- [1\. Collapsed → Expanded](#heading-gn4foim63)
- [2\. Expanded → Collapsed](#heading-np5g1c6yi)
- [Preview the Result](#heading-tl23fytfm)
- [Make the Component Highly Reusable](#heading-gpdkmctrc)
- [1\. Turn the Copy into Variables](#heading-mibu6a9dl)
- [Title Text](#heading-b0mi6hwc9)
- [Answer Text](#heading-30xp96q37)
- [2\. Configure Component Content on the Page](#heading-x51ufaskt)
- [3\. Reuse It for Other Questions](#heading-xb9u100vq)
- [Summary](#heading-jhni2s4um)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)