Collapsible container

You can achieve collapsible functionality for a single element or for a container with multiple elements inside. These are also referred to as fold-out boxes, collapsible elements or containers, accordion, open/close elements, etc.

When you need to provide users with an overview of a large amount of content, you can use collapsible elements. You can choose whether the element should be opened or closed by default. When the element is closed, only the heading is visible while the content is hidden when the page is opened. It requires an extra click for the user to access the relevant content when the element is expanded; however, it allows for a quick overview if a page contains a lot of content.

Collapsible container (open)

You can choose whether the element should be expanded or collapsed by default.

Collapsible container (closed)

You can choose whether the element should be expanded or collapsed by default.

How to Do It

There are two different ways to create collapsible elements:

1. Using a collapsible container
If you choose a collapsible container you can place the elements you need inside it — grouped together in one container. You can find the collapsible container under the container tab (view Embed new element). This method is useful if you want more than one element inside your collapsible container.

2. Enabling collapsible functionality for individual elements
Alternatively, you can enable collapsible functionality for Text or Text & Images elements individually. You do this in the Appearance tab of the element, as shown below. This method is suitable if you only have one element that needs collapsible functionality.

Insert collapsible container (1)

1. Select the tab Container.

2. Choose the element Collapsible Container.

3. Give the collapsible element a heading.

4. Choose whether the collapsible element should be open or closed by default.

5. Save and close.

The fold-out element is now created.

5. You can now add the elements you need by clicking on the add content icon (+ Content).

Insert a single collapsible element (2)

1. Create a new element on your page by clicking on the + Create new content.

2. For example, select a Regular Text Element.

3. Give the fold-out box a heading.

4. Insert content into the text field.

5. Switch to the Appearance tab.

6. Expand the drop-down menu under Frame and select either Collapsible (open) or Collapsible (closed).

The collapsible element is now created.

Link to a collapsible container element

You link to a collapsible element just like any other element in TYPO3. When the user clicks on your link, the collapsible element will appear open.

How to create a link to a page, an element, a file, URL, e-mail or phone number

If your collapsible element is on a page you don’t have access to in the backend, you’ll need to link to it slightly differently.

How to create a link to an element on another website

Combine collapsible containers with collapsible elements

It is possible to place one or more collapsible elements inside a collapsible container. To ensure the solution is not too cumbersome, a special design has been developed where closed collapsible elements are not displayed in boxes but are instead outlined with a thin line.

Special design for collapsible elements inside a collapsible container

How to do it

Create a collapsible container as described above in the "Insert collapsible container" guide.

1. Switch to the Appearance tab

2. Expand the drop-down menu under Frame and select Collapsible (new).

Save and close the element. The collapsible container is created.

You can now create one or more collapsible elements inside the collapsible container by following the guide above, titled "Insert a single collapsible element." Your collapsible elements will automatically receive the special design.

Revised 11.08.2025

TYPO3 support

Staff service at AU » TYPO3