Skip to main content

How to Build Collapsible Section

Learn how to add interactive sections to your landing pages to improve readability and reduce scrolling.

What Are Collapsible Sections?

Collapsible sections let you hide and reveal content when clicked. This helps you organize long pages into smaller, easy-to-read sections.

Benefits

  • Reduce scrolling on long pages

  • Improve content readability

  • Let viewers focus on what matters

  • Ideal for FAQs and agendas

This feature is only available for landing pages


Demo Video


How Collapsible Sections Work

You can add a collapsible section directly inside the builder. This element lets you show or hide content with a click.

Add a Collapsible Section

  1. Open your landing page in the builder

  2. Drag the Collapsible element into your layout

    From the content panel in the landing page, drag in a collapsible content block where desired

Edit the Section Title

You can customize how the section header looks.

  1. Click the collapsible section

  2. Edit the title text

  3. Update styling options:

    • Font style

    • Font size

    • Text color

Edit the collapsible's title, font style, font size and text color in the collapsible attributes panel

Add Content Inside the Section

Add multiple elements to your collapsible section to create the layout you need.

Supported Elements

Add these elements inside a collapsible section:

  • Text

  • Images

  • Buttons

  • Layout sections

Tip: Add a nested section to create a multi-column layout inside your collapsible section.

You can add in text, images and button contents to the collapsible section.

Best Practices

  • Use short titles for each section

  • Group related content together

  • Avoid adding too much content inside one section

  • Use for FAQs, schedules, or product details

Important Notes

  • You cannot add a collapsible section inside another collapsible section.

  • Keep your content simple to make it easy to read and use.


Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.

Did this answer your question?