{"id":8185,"date":"2019-06-19T13:27:44","date_gmt":"2019-06-19T13:27:44","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8185"},"modified":"2023-06-08T13:09:20","modified_gmt":"2023-06-08T13:09:20","slug":"jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/","title":{"rendered":"How to Display Images in the Image Accordion Widget"},"content":{"rendered":"\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_11.png\" alt=\"Image Accordion widget of the JetTabs plugin\">\n\n\n\n<p>Let\u2019s add a new page at Dashboard and edit it with the <a href=\"https:\/\/elementor.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Elementor<\/a> editor.<\/p>\n\n\n\n<p>Fill the tabs with the content.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_9-2.png\" alt=\"items settings of the Image Accordion widget \">\n\n\n\n<p>You may choose any picture from your media library or upload a new one to it from your hard drive.<\/p>\n\n\n\n<p>While editing an image, you may change its <strong>Orientation<\/strong>: either vertical or horizontal one.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_8-1.png\" alt=\"content settings of the Image Accordion widget\">\n\n\n\n<p>There is also a cool option to make images look more active to occupy more space. You can set the width or height (depending on the orientation you\u2019ve chosen) of the image in percent and make it show up as a larger section of an accordion.<\/p>\n\n\n\n<p>Let\u2019s vary animation duration: the less the value, the faster the animation effect.<\/p>\n\n\n\n<p>There are 6 kinds of easing: <strong>Sine<\/strong>, <strong>Quint<\/strong>, <strong>Cubic<\/strong>, <strong>Expo<\/strong>, <strong>Circ<\/strong>, <strong>Back<\/strong>. So, it isn\u2019t a problem to choose the best for you.<\/p>\n\n\n\n<p>If you need more items, just click the <strong>Add item<\/strong> option.<\/p>\n\n\n\n<p>Also, there is a <strong>Button text<\/strong> option available. In order to change the text, you may fill an appropriate field.<\/p>\n\n\n\n<p>In order to edit content, go to a <strong>Style<\/strong> tab.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_7-2.png\" alt=\"description style settings of the Image Accordion widget\">\n\n\n\n<p>Here you may set the stylization options to customize the content: play around with the font, background color, size, alignment, and so on.<\/p>\n\n\n\n<p>In the end, you may save this page as a draft or as a template.<\/p>\n\n\n\n<p>That\u2019s all that you need to create an <strong>Image Accordion<\/strong>. Everything is extremely simple.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make your website more attractive and organized with one of the JetTabs plugins which is called the Image Accordion.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[496],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T13:09:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_11.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/\",\"name\":\"How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-19T13:27:44+00:00\",\"dateModified\":\"2023-06-08T13:09:20+00:00\",\"description\":\"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Images in the Image Accordion Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock","description":"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/","og_locale":"en_US","og_type":"article","og_title":"How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock","og_description":"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/","og_site_name":"Help Center","article_modified_time":"2023-06-08T13:09:20+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_11.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/","name":"How to Showcase Images in Accordion Layout in Elementor \u2014 JetTabs | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-19T13:27:44+00:00","dateModified":"2023-06-08T13:09:20+00:00","description":"Learn how to work with JetTabs plugin to create an eye-catching Image Accordion performance. Create a unique layout with Crocoblock easily!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-image-accordion-widget-for-elementor-how-to-display-images-in-the-form-of-an-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Images in the Image Accordion Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8185"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8185"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8185"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}