Create collapsible content

The Collapsible content feature limits the visible height of long content and lets visitors reveal the rest with a button. You can use it for text, images, and other elements in Gutenberg, Elementor, or WPBakery.

Collapsible content expanding after the Read more button is clicked — The hidden content expands when a visitor clicks the Read more button.

Set up collapsible content in Gutenberg

1. Add the WoodMart Collapsible content block to the page.

2. Add or edit blocks inside its Content container. The block also includes a WoodMart Button below the content.

3. Select the Collapsible content block and configure Content height for the required devices. This value determines how much content remains visible before the block is opened.

4. Optionally enable Fade effect, select a Color scheme, and enter Opened state button text, such as “Show less.” Customize the default button text and design by selecting the Button block.

Set up collapsible content in Elementor

1. Add an Elementor Container and place the content you want to collapse inside it.

Add a Container in Elementor.

2. Add the WoodMart Button as the last element in the same Container.

Read more button placed last inside an Elementor container — Keep the Button as the last element inside the same Elementor Container.

3. Select the Container, enable Collapsible content, and configure Column content height. You can also set Fade out color to match the Container background.

Collapsible content and Column content height settings in an Elementor container — Enable Collapsible content and set the visible content height.

4. Select the Button and enable Use for collapsible content.

Use for collapsible content option in the Elementor WoodMart Button settings — Enable Use for collapsible content in the WoodMart Button settings.

Set up collapsible content in WPBakery

1. Place the content and a WoodMart Button inside the same Column. The Button must be the last element in that Column.

Text Block followed by a Button inside one WPBakery column — Place the Button after all other elements in the WPBakery Column.

2. Edit the Column, enable Collapsible content, and set Column content height for desktop, tablet, and mobile. Use Fade out color when needed to blend the collapsed content with its background.

Collapsible content and Column content height settings in WPBakery Column Settings — Enable Collapsible content and configure the visible Column content height.

3. Edit the Button and enable Enable collapsible content.

Enable collapsible content option in WPBakery Button Settings — Enable collapsible content in the WoodMart Button settings.

Check the result

Preview the page on desktop, tablet, and mobile. If the collapsed area is too short or too tall, adjust the content height for that device. When the content is shorter than the configured height, there may be no visible content to collapse.