{"id":38591,"date":"2021-08-18T11:07:31","date_gmt":"2021-08-18T09:07:31","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/jettricks-unfold-widget-button-to-show-more-content\/"},"modified":"2023-07-16T11:35:21","modified_gmt":"2023-07-16T09:35:21","slug":"jettricks-unfold-widget-button-to-show-more-content","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/jettricks-unfold-widget-button-to-show-more-content\/","title":{"rendered":"JetTricks Unfold Widget: Button to show more content"},"content":{"rendered":"\n<p>This tutorial introduces the <strong>Unfold<\/strong> widget of the <a href=\"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy\/?jsf=jet-engine:1&amp;tax=categorias-ea:82\">JetTricks<\/a> plugin included in the <a href=\"https:\/\/lacolmenatecnologica.com\/en\/unirse\/1-crocoblock-jetplugins-license\/\">Crocoblock JetPlugins<\/a> site. You will have the opportunity to hide part of a text or template and show the rest when the user clicks on a button.<\/p>\n\n<p>This widget <strong>can help you save space<\/strong> and better organize the appearance of the page by hiding additional content. Unlike the <strong>Read more<\/strong> widget, you cannot hide one or more sections. However, the Unfold widget <strong>can be opened and then closed again<\/strong>. It also includes many customization options that can help you get the most out of it. For example, you can design it differently in folding and unfolding 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\/en\/elementor-academy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Academy<\/a> soon.<\/p>\n\n<p>Another feature of this widget is that it can not only be used to show\/hide text, but you can also use a template that you have previously created.<\/p>\n\n<p>Let&#8217;s see how the Unfold widget works.<\/p>\n\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#paso1\">1. Add the Expand widget<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso2\">2. Define the configuration<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso3\">3. Choose the content<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso4\">4. Customize the button<\/a><\/li><li class=\"toc-level-1\"><a href=\"#paso5\">5. Make up to your liking<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"paso1\">1. Add the Expand widget<\/h2>\n\n<p>Open in the Elementor builder the <strong>page<\/strong> or <strong>post<\/strong> to which you need to add an <strong>Unfold<\/strong> widget. Find the <strong>Unfold widget<\/strong> in the Elements panel and drag it to the section where you want to place it.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"359\" height=\"272\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"JetTricks Unfold\" class=\"wp-image-16745\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 359w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1-300x227.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=143 143w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-1.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=215 215w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"paso2\">2. Define the configuration<\/h2>\n\n<p>In the left sidebar, you will see the <strong>Settings<\/strong> block. Here you can define the folding and unfolding settings.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"359\" height=\"778\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"JetTricks Unfold - Settings\" class=\"wp-image-16746\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 359w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2-138x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 138w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=215 215w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-2.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=287 287w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/a><\/figure><\/div>\n\n<ul class=\"wp-block-list\"><li><strong>Fold<\/strong>: if you do not activate this option, the content block will be displayed open by default. Otherwise, it will be shown closed.<\/li><li><strong>Scroll to Top After Hiding Content<\/strong>  (back to top after hiding content): 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 the reference point.<\/li><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 by simply typing the required value in the bar;<\/li><li><strong>Separator height<\/strong>: defines the height of the colored separator stripe starting from the bottom of the unfolded block and going to the top. You can lighten the color with transparency in the <strong>Style<\/strong> tab. It is even possible to convert it into a gradient.<\/li><li><strong>Duration<\/strong>: here you can choose how fast the content block will be folded and unfolded. The higher the value, the slower the movement.<\/li><li><strong>Easing<\/strong>: here there are 9 types of folding and unfolding animation to choose from.<\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"paso3\">3. Choose the content<\/h2>\n\n<p>In the <strong>Content<\/strong> block, you can add static content (such as text, images, video or other media) or extract it dynamically from the meta field. In addition to that, you can add any of the available templates in the hidden content block.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-jettricks-content.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"360\" height=\"944\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-jettricks-content.gif?strip=all&quality=92&webp=92&avif=92&resize=360%2C944\" alt=\"Unfold JetTricks Content\" class=\"wp-image-16747\"\/><\/a><\/figure><\/div>\n\n<p>To add the ready-made template to the hidden block, you should 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 drop-down 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>You can customize the button that folds and displays the hidden content block in the <strong>Button<\/strong> section.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Alignment<\/strong>: allows you to choose where the button will be placed.<\/li><li><strong>Fold Icon<\/strong>: you can choose the icon for the fold and unfold buttons from the icon library or load your own SVG file.<\/li><li><strong>Fold Text<\/strong>: type here the titles of the fold and unfold buttons.<\/li><\/ul>\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-boton.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"268\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/unfold-boton.gif?strip=all&quality=92&webp=92&avif=92&resize=360%2C268\" alt=\"Unfold - Button\" class=\"wp-image-16748\"\/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"paso5\">5. Make up to your liking<\/h2>\n\n<p>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<p>So, these simple steps are all you have to do to get an awesome display block on your website page.<\/p>\n","protected":false},"featured_media":31305,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-38591","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/jettricks-unfold-crocoblock.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"This tutorial introduces the Unfold widget of the JetTricks plugin included in the Crocoblock JetPlugins site. You will have the opportunity to hide part of a text or template and show the rest when the user clicks on a button. This widget can help you save space and better organize the appearance of the page&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/38591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/31305"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=38591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}