--- title: "How to make a collapsible Elementor Flexbox container?" url: https://theplusaddons.com/docs/collapsible-elementor-flexbox-container/ date: 2023-03-06 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "A long container full of specifications or FAQs makes visitors scroll past content they did not ask for. With the Container Based source, the Unfold widget from The Plus Addons..." image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-make-a-collapsible-Elementor-Flexbox-container_-1024x536.jpg word_count: 574 --- # How to make a collapsible Elementor Flexbox container? ## - Unfold de The Plus Addons for Elementor usa la fuente Container Based para cortar el contenedor vecino a una altura fija y añadir un botón Read More / Read Less. - Unfold requiere la edición Pro: en la versión gratuita aparece con un icono de candado en el panel Elements, y se activa desde The Plus Addons > Widgets. - Max Height cambia por dispositivo, con 1024 px para tablet y 767 px para móvil, y Read Less devuelve el contenedor a la altura máxima del dispositivo actual. A long container full of specifications or FAQs makes visitors scroll past content they did not ask for. With the **Container Based** source, the **Unfold** widget from The Plus Addons for Elementor cuts the container next to it to a set height and adds a Read More / Read Less button. *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 layout built with Elementor containers. ## How to Make a Container Collapsible - Build the content you want to collapse inside its own container.- Add a **separate** container directly above that container (or directly below it), at the same level, and drag the **Unfold** widget straight into it. Don't place the widget in a container nested inside that one.- In **Content > Unfold**, add a **Title** if you want one and set **Select Source** to **Container Based**. ![Select Source set to Container Based in the Unfold widget, with the specifications container below it](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-container-source.webp) - Set **Expand Button Text**, **Collapse Button Text** and the button icons in the same section.- Open **Content Options** and choose **Content Expand Direction**: **Above Button** when the Unfold widget's container is directly *above* the container to collapse, **Below Button** when it is directly below. ![Content Expand Direction set to Above Button in the Content Options section of the Unfold widget](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-container-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 container is cut to (default 100 px), then publish the page and click the button to test it. ![A specifications container cut to 100 pixels with a fade, below a Read More button on the live page](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-result-container-collapsed.webp) After Read More the whole container opens: ![The specifications container fully open below a Read Less button on the live page](https://theplusaddons.com/wp-content/uploads/2026/09/unfold-result-container-expanded.webp) Here is the complete setup, from the layout to the result: ![Animated demo of placing the Unfold widget above a container and collapsing it](https://theplusaddons.com/wp-content/uploads/2023/03/unfold-container-placement-demo.gif) ## How It Behaves - Only the container right next to the Unfold widget's container is used: the next one for Above Button, the previous one for Below Button.- Collapsed, the container is cut to Max Height with a light grey fade. With **Custom Opacity** on, the fade covers only the bottom **Opacity Height** and fades to **Opacity Color**.- Max Height can differ per device: the tablet value applies from 1024 px wide down, the mobile value from 767 px down.- Read Less closes the container to the Max Height of the current device. ## Limitations - If the direction does not match the layout, or the widget sits in a nested container, nothing collapses, but the button still switches between Read More and Read Less.- A container shorter than Max Height gets no button and is still stretched to Max Height.- Turning on Custom Opacity without choosing an Opacity Color removes the fade completely.- 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**. ## Troubleshooting ### Nothing collapses on the published page Check that the Unfold widget's container sits directly above or below the target container at the same level, that the widget is not inside a nested container, and that Content Expand Direction matches the order. ### The button does not appear The container is shorter than Max Height on that device. Lower **Max Height**. ### The fade is gone If **Custom Opacity** is on, choose an **Opacity Color**. ## Related Docs - [Unfold widget settings overview](https://theplusaddons.com/docs/unfold-elementor-widget-settings-overview/)- [Toggle an Elementor inner section](https://theplusaddons.com/docs/toggle-an-elementor-inner-section/)- [Add a Load More button to any section](https://theplusaddons.com/docs/add-load-more-button-to-any-section-in-elementor/)