{"id":6535,"date":"2021-08-18T11:07:31","date_gmt":"2021-08-18T09:07:31","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/jettricks-unfold-widget-button-to-show-more-content\/"},"modified":"2026-09-02T19:41:17","modified_gmt":"2026-09-02T17:41:17","slug":"jettricks-unfold-widget-button-to-show-more-content","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/jettricks-unfold-widget-button-to-show-more-content\/","title":{"rendered":"JetTricks Unfold Widget: Button to Show More Content"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-Step Video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Widget Unfold de JetTricks de Crocoblock JetPlugins: Bot\u00f3n para mostrar m\u00e1s contenido\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HQ5UfkdDl6o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n<p class=\"wp-block-paragraph\">This tutorial introduces the <strong>Unfold<\/strong> widget from the <strong><a href=\"https:\/\/crocoblock.com\/plugins\/jettricks\/\">JetTricks<\/a><\/strong> plugin, included in the <a href=\"https:\/\/crocoblock.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Crocoblock<\/strong><\/a> suite. You&#8217;ll have the opportunity to hide part of a text or template and display the rest when the user clicks a button. <\/p>\n\n<p class=\"wp-block-paragraph\">This widget <strong>can help you save space<\/strong> and better organize the page&#8217;s appearance by hiding additional content. Unlike the <strong>Read More<\/strong> widget, it cannot hide one or more sections. However, the Unfold widget <strong>can be opened and then closed again<\/strong>. Additionally, it includes many customization options that can help you make the most of it. For example, you can design it differently in folded and unfolded modes. By the way, if you want more information about the <strong>Read More<\/strong> widget, I will add it to <a href=\"https:\/\/lacolmenatecnologica.com\/elementor-academy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Academy<\/a> soon.     <\/p>\n\n<p class=\"wp-block-paragraph\">Another feature of this widget is that it can not only be used to show\/hide text, but you can also use a template you have previously created.<\/p>\n\n<p class=\"wp-block-paragraph\">Let&#8217;s see how the <strong>Unfold widget<\/strong> works.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"paso1\">1. Add the Unfold Widget<\/h2>\n\n<p class=\"wp-block-paragraph\">Open the <strong>page<\/strong> or <strong>post<\/strong> where you need to add an <strong>Unfold<\/strong> widget in the Elementor builder. Find the <strong>Unfold widget<\/strong> in the Elements panel and drag it to the section where you want to place it. <\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995ae5295b8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995ae5295b8\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"272\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-1.jpg\" alt=\"JetTricks Unfold\" class=\"wp-image-4951\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"paso2\">2. Define the Settings<\/h2>\n\n<p class=\"wp-block-paragraph\">In the left sidebar, you will see the <strong>Settings<\/strong> block. Here you can define the fold and unfold settings. <\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995ae529ba9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995ae529ba9\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"778\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-2.jpg\" alt=\"JetTricks Unfold - Settings\" class=\"wp-image-4952\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-2.jpg 359w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-2-231x500.jpg 231w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<ul class=\"wp-block-list\">\n<li><strong>Fold<\/strong>: If you do not activate this option, the content block will be displayed open by default. Otherwise, it will be displayed closed. <\/li>\n\n\n\n<li><strong>Scroll to Top After Hiding Content<\/strong>: If you activate this option, the screen will scroll up when you hide the content of a block. This can be very useful when the content is long so that the user does not lose their point of reference.<\/li>\n\n\n\n<li><strong>Closed Height<\/strong>: This option allows you to define the height of the content block when it is closed. You can do this by moving the slider or simply typing the required value into the bar. <\/li>\n\n\n\n<li><strong>Separator height<\/strong>: Defines the height of the colored separator strip that starts from the bottom of the unfolded block and goes towards the top. You can lighten the color with transparency in the <strong>Style<\/strong> tab. It is even possible to turn it into a gradient.  <\/li>\n\n\n\n<li><strong>Duration<\/strong>: Here you can choose how quickly the content block will fold and unfold. The higher the value, the slower the movement. <\/li>\n\n\n\n<li><strong>Easing<\/strong>: Here are 9 types of fold and unfold animation you can choose from.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"paso3\">3. Choose the Content<\/h2>\n\n<p class=\"wp-block-paragraph\">In the <strong>Content<\/strong> block, you can add static content (such as text, images, video, or other media) or dynamically pull it from the meta field. In addition to that, you can add any of the available templates to the hidden content block. <\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995ae52a1d4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995ae52a1d4\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"944\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-jettricks-content.gif\" alt=\"Unfold JetTricks Content\" class=\"wp-image-4954\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">To add the pre-made template to the hidden block, you must press the <strong>Template<\/strong> button in the <strong>Content Type<\/strong> row, which is the button with the leaf-shaped icon. Choose the template from the dropdown menu, and it will be automatically added to the hidden content block. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"paso4\">4. Customize the Button<\/h2>\n\n<p class=\"wp-block-paragraph\">You can customize the button that folds and unfolds the hidden content block in the <strong>Button<\/strong> section.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Alignment<\/strong>: Allows you to choose where the button will be placed.<\/li>\n\n\n\n<li><strong>Fold Icon<\/strong>: You can choose the icon for the fold and unfold buttons from the icon library or upload your own SVG file.<\/li>\n\n\n\n<li><strong>Fold Text<\/strong>: Type the titles for the fold and unfold buttons here.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995ae52a93f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995ae52a93f\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"268\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/unfold-boton.gif\" alt=\"Unfold - Button\" class=\"wp-image-4953\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"paso5\">5. Customize to Your Liking<\/h2>\n\n<p class=\"wp-block-paragraph\">There are many design settings for each element in the <strong>Style<\/strong> tab. Here are some examples of what you could create with the help of the Unfold widget: <\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/02\/unfold_cases.mp4\" playsinline=\"\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\">So, these simple steps are all you need to do to get an impressive unfold block on your website page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-Step Video Introduction This tutorial introduces the Unfold widget from the JetTricks plugin, included in the Crocoblock suite. You&#8217;ll have the opportunity to hide part of a text or template and display the rest when the user clicks a button. This widget can help you save space and better organize the page&#8217;s appearance by hiding [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"JetTricks Unfold Widget: Show More Content with Ease","_seopress_titles_desc":"This tutorial introduces the JetTricks Unfold widget, part of the Crocoblock suite. You'll learn to hide part of a text or...","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[394],"tags":[376,385],"class_list":["post-6535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocoblock","tag-dynamic-content","tag-web-design"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6535"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6535\/revisions"}],"predecessor-version":[{"id":6537,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6535\/revisions\/6537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6536"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}