{"id":104943,"date":"2023-03-06T13:00:30","date_gmt":"2023-03-06T07:30:30","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104943"},"modified":"2023-03-06T13:00:30","modified_gmt":"2023-03-06T07:30:30","slug":"toggle-an-elementor-inner-section","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/toggle-an-elementor-inner-section\/","title":{"rendered":"How to Toggle an Elementor inner section?"},"content":{"rendered":"\n<p>Do you want to toggle an Elementor inner section? Elementor is an incredibly powerful page builder for WordPress that allows users to create stunning and complex websites with ease. One of the reasons it is so popular is due to its versatile and easy-to-use features, such as the ability to use inner sections. Inner sections are a great way to create visually appealing and organised layouts.<\/p>\n\n\n\n<p>You can turn your Elementor inner section into a beautiful toggle panel using the Unfold widget from The Plus Addons for Elementor.<\/p>\n\n\n\n<p>Elementor Section is depreciated, we suggest using Elementor Flexbox containers, check here.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Unfold widget, <a href=\"\/docs\/unfold-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/unfold-expand-toggle?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To turn an Elementor inner section into a collapsible toggle panel, you must create your layout using the Elementor Inner Section widget.<\/p>\n\n\n\n<p>Once the layout is ready, add the Unfold widget inside the same Container containing your Inner section widget.<\/p>\n\n\n\n<p>If you want, you can add a title in the <strong>Title<\/strong> field. After that, from the <strong>Select Source<\/strong> dropdown, choose <strong>Inner Section Based<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"910\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-inner-section.png\" alt=\"unfold inner section\" class=\"wp-image-104944\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-inner-section.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-inner-section-99x300.png 99w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>After adjusting the button settings, go to the <strong>Content Options<\/strong> tab.<\/p>\n\n\n\n<p>Now depending on the Unfold widget\u2019s placement in the container, you have to select the option from the <strong>Content Expand Direction<\/strong> dropdown.<\/p>\n\n\n\n<p>If you have placed the Unfold widget above your Inner section widget in the Container, then you should choose <strong>Above Button<\/strong> and if placed below, then select the <strong>Below Button<\/strong> option.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"512\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content-options-button-placement.gif\" alt=\"unfold content options button placement\" class=\"wp-image-104945\"\/><\/figure>\n\n\n\n<p>Now your inner section should work as a collapsible toggle panel. You can further customise the settings in the <strong>Content Options<\/strong> tab if you want.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"961\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-inner-section-placement-demo.gif\" alt=\"unfold inner section placement demo\" class=\"wp-image-104946\"\/><\/figure>\n\n\n\n<p>This is how simply you can toggle an Elementor inner section.<\/p>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/collapsible-elementor-flexbox-container\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to make a collapsible Elementor Flexbox container<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104947,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,551],"class_list":["post-104943","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-unfold"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104943"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104947"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104943"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}