Skip to main content

Expandable sections block

What is the Expandable sections block for?

Use it when the details matter but do not need to be visible all at once. The Expandable sections block organises topics, sections or categories into expandable panels. Visitors open the part they need while the page remains shorter and easier to scan at first glance.

It works well for specifications, programmes, menus, service details and longer explanations. On the public page, only one panel can be open at a time; clicking an open panel again closes it.

Example: product specifications

    • Width: 68 cm
    • Height: 42 cm
    • Depth: 24 cm
    • Weight: 4.8 kg

Expandable sections or FAQ? If the panel headings are topics or sections — such as “Materials”, “Programme” or “Delivery” — the Expandable sections block is the right fit. If you are answering natural questions such as “How much does it cost?” or “When will it arrive?”, use FAQ instead.

Tips for a useful Expandable sections block

  • Make each heading meaningful on its own. Visitors should understand what is inside before opening it.
  • Three to six panels is a good starting point. For longer lists, split the content into more than one block or larger topics.
  • You do not need an open panel by default. If none is marked, the block starts fully collapsed.
  • If several are marked open by default, the first one opens. The public view keeps only one panel open at a time.
  • Do not hide essential messages. Pricing, the main benefit, important limitations and the primary CTA should remain visible.
  • Panel content is formatted text. Use paragraphs, bold, lists and other basic formatting when helpful.

What can you configure in the Expandable sections block?

The block title, panel headings, content and initial state define how it works.

Block title

The whole accordion can have its own heading, but it is optional.

Panel headings

Short topic labels that explain what detail is inside before the panel is opened.

Formatted content

Use paragraphs, bold or italic emphasis, lists and other basic formatting inside each panel.

Open when the page loads

One panel can start open. If several are marked, the first one is opened on the public page.

Panel order

Visitors see topics in the order you set, so put the most important or most common information first.

Background and width

Adjust the block background, section width, content width and spacing to fit the surrounding page.

New layout: title beside cards

Under Layout, you can now choose Title beside cards besides the familiar List. The block title then appears in large type on the left, with a short intro and the rows on the right, each row a rounded card with a round arrow at its right edge. On phones the title moves to the top, followed by the intro and the rows.

  • Intro: an optional short text beside the title. It only shows in this layout.
  • What the row does: for each row, choose Opens to show content, or Link to take visitors to the page you set. A link row does not show content. That way a list of questions can include, say, a “Prices and packages” row that takes visitors to your price list.
  • Existing Expandable sections blocks stay in the List layout; nothing changes on them.

The sample below shows it live: three rows that open and a link row at the end.

Sample: before we start

Every conversion starts with a conversation. These are the questions nearly everyone asks over the first coffee.

  • On average 10–12 weeks from the survey to handover. We can give you the exact time after the design.

  • Prices and packages
The Layout selector and, on each row, the “What the row does” switch: Opens or Link.

When is another block better?

Choose based on the structure of the content.

FAQ →

Use it when visitors are looking for short, direct answers to genuine questions.

Tabs →

Use it when switching between alternative views or categories and only one needs to be visible at a time.

Rich text →

Use it when everyone should read the content in a natural linear sequence.

The same structure, different kinds of content

From specifications to menus, many kinds of detail can work in panels

The live examples below show how the block's role changes depending on whether you are organising data, a schedule, categories or explanatory detail.

Example: programme in chronological order — first panel open

  • Arrival, registration and morning coffee in the communal area.

Example: menu by category — first panel open

    • Bruschetta with tomato and basil — 2 490 Ft
    • Grilled goat's cheese with fresh salad — 3 290 Ft

Example: service details — all panels closed

DETAIL WHEN IT IS NEEDED

Keep the page easy to scan without throwing away useful detail.

Use descriptive panel headings, format the content inside them, and open an item by default only when it genuinely helps orientation.

Build my website →Back to Website Blocks