---
title: "How to Toggle an Elementor inner section?"
url: https://theplusaddons.com/docs/toggle-an-elementor-inner-section/
date: 2023-03-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Inner Sections group columns of content inside a classic Elementor section. The Unfold widget can cut one to a set height and open it with a Read More button. This..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Toggle-an-Elementor-inner-section_-1024x536.jpg
word_count: 464
---

# How to Toggle an Elementor inner section?

## 

- Unfold is a Pro widget in The Plus Addons for Elementor Pro, and the free plugin shows it with a lock icon while a page that already holds it shows nothing of it when Pro is inactive.
- Unfold collapses only the Inner Section directly next to the widget in the same column, with Content Expand Direction set to Above Button or Below Button and Max Height defaulting to 100 px.
- Read More opens the collapsed Inner Section to full height and Read Less closes it again, while tablet uses 1024 px down and mobile uses 767 px down for Max Height values.

Inner Sections group columns of content inside a classic Elementor section. The Unfold widget can cut one to a set height and open it with a Read More button.

This guide is for layouts built with sections. For pages built with containers, follow [Make a collapsible Elementor Flexbox container](https://theplusaddons.com/docs/collapsible-elementor-flexbox-container/) instead.

*To check the complete feature overview documentation of The Plus Addons for Elementor Unfold widget, [click here](https://theplusaddons.com/docs/unfold-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/unfold/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Unfold is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds an Unfold widget shows nothing of it while Pro is inactive.- **Widget to enable:** Unfold, switched on under **The Plus Addons > Widgets**.- A classic Section whose column holds the Inner Section you want to collapse.

## How to Toggle an Inner Section

- Open the column that holds the Inner Section.- Drag the **Unfold** widget into the same column, directly above the Inner Section (or directly below it).- Set **Select Source** to **Inner Section Based** and add a **Title** if you want one.

![Select Source set to Inner Section Based in the Unfold widget, placed above an inner section](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-inner-source.webp)

- In **Content Options**, choose **Content Expand Direction**: **Above Button** when the widget is directly above the Inner Section, **Below Button** when it is directly below.

![Content Expand Direction in the Content Options section of the Unfold widget](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-inner-direction.webp)

The direction dropdown in motion:

![Animated demo of the Content Expand Direction dropdown in the Content Options section](https://theplusaddons.com/wp-content/uploads/2023/03/unfold-content-options-button-placement.gif)

- Set **Max Height**, the height the Inner Section is cut to (default 100 px), then publish the page and click the button to test it.

Here is the setup, from placing the widget to the result:

![Animated demo of placing the Unfold widget above an inner section and collapsing it](https://theplusaddons.com/wp-content/uploads/2023/03/unfold-inner-section-placement-demo.gif)

## How It Behaves

- Only the Inner Section right next to the Unfold widget in the same column is used: the next one for Above Button, the previous one for Below Button.- Collapsed, the Inner Section is cut to Max Height with a light grey fade. Read More opens it to its full height and Read Less closes it again.- Max Height can differ per device: the tablet value applies from 1024 px wide down, the mobile value from 767 px down.

## Limitations

- The default button icons do not show on the page. Choose your own icons and set their size in **Style > Toggle Button > Toggle Icon Options**.- Only one Inner Section is collapsed: the one directly next to the widget.

## Troubleshooting

### Nothing collapses on the published page

Move the Unfold widget so it sits directly above or below the Inner Section in the same column, with nothing between them, and check that Content Expand Direction matches that order.

### The button does not appear

The Inner Section is shorter than Max Height on that device. Lower **Max Height**.

## Related Docs

- [Unfold widget settings overview](https://theplusaddons.com/docs/unfold-elementor-widget-settings-overview/)- [Make a collapsible Elementor Flexbox container](https://theplusaddons.com/docs/collapsible-elementor-flexbox-container/)- [Add a Load More button to any section](https://theplusaddons.com/docs/add-load-more-button-to-any-section-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before I can toggle an inner section in Elementor?**
A: The setup depends on a classic Elementor Section, not a container. The Inner Section has to sit inside a column, and the Unfold widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH must be installed, activated, and switched on under The Plus Addons > Widgets. That matters because the free plugin shows Unfold with a lock icon, while Pro is the version that actually collapses content.

**Q: How do I collapse an inner section with a Read More button?**
A: Place the Unfold widget in the same column as the Inner Section, directly above it or directly below it. Then set Select Source to Inner Section Based and choose the Content Expand Direction to match the widget position. Max Height controls how much of the section is visible before collapse, with 100 px as the default. The button then expands and collapses that same inner section inside the Elementor editor flow.

**Q: Why does only one inner section collapse when I use Unfold?**
A: Unfold only targets the Inner Section right next to it in the same column. If the widget sits above the content, it uses the next Inner Section; if it sits below, it uses the previous one. That design keeps the toggle predictable and avoids collapsing multiple blocks at once. The page also says only one Inner Section is collapsed, so spacing or extra elements between them can break the setup.

**Q: What happens when an inner section is collapsed?**
A: Collapsed content is cut to Max Height and gets a light grey fade, so users can tell there is more text or content hidden below. Read More opens it to full height, and Read Less closes it again. Max Height can also vary by device: tablet settings apply from 1024 px wide down, and mobile settings apply from 767 px down. That makes responsive tuning important if your layout changes a lot across breakpoints.

**Q: Why doesn't anything collapse on my published page?**
A: The usual cause is placement or direction mismatch. The Unfold widget has to sit directly above or below the Inner Section in the same column, with nothing between them, and Content Expand Direction has to match that order. If those two pieces are out of sync, Unfold cannot know which section to control. In practice, this is a layout issue rather than a button issue.

**Q: Why doesn't the toggle button appear on my page?**
A: The most common reason is that the Inner Section is shorter than Max Height on that device, so there is nothing to collapse and no button needs to show. Lowering Max Height forces overflow and makes the toggle relevant again. Another limitation from The Plus Addons for Elementor is that default button icons do not show on the page, so custom icons have to be set in Style > Toggle Button > Toggle Icon Options if you want visible icons.