{"id":6590,"date":"2019-02-12T14:08:04","date_gmt":"2019-02-12T14:08:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=6590"},"modified":"2023-06-08T12:55:32","modified_gmt":"2023-06-08T12:55:32","slug":"jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/","title":{"rendered":"How to Display Content in the Classic Accordion Widget"},"content":{"rendered":"\n

Look through this tutorial in order to learn more about displaying content using the Classic Accordion<\/strong><\/a> widget.<\/p>\n\n\n\n

How to Use Classic Accordion Widget<\/h2>\n\n\n\n
\n

Let’s open the page where you want to add the Classic Accordion<\/strong> widget for editing with the Elementor<\/a> editor. Once you’ve done so, feel free to follow the guide below to learn how to use it and fill it up with content.<\/p>\n\n\n\n

Drag and drop the Classic Accordion<\/strong> widget from the elements panel in Elementor<\/strong>. Also, you can insert a .json<\/strong> file from the dummy-data<\/strong> folder. In case you have the JetThemeCore<\/a> plugin, you can add the accordion template from the Magic Button<\/strong> library, located in Sections > Accordion<\/strong> block.<\/p>\n\n\n\n

Now, in the editor, click the first item and start adding content to it.<\/p>\n\n\n\n\"items\n\n\n\n

If you toggle to the “yes” Active<\/strong> option, the content will be displayed permanently. Disable it if you want the user to click the item in order to unravel the content.<\/p>\n\n\n\n

Select icons if needed and enter the label title. As you can see, there is a Dynamic<\/strong> option so that you can pull the title of the label from the custom fields and meta boxes in case you’ve got any dynamic content added with JetEngine<\/a> and available for the template where the Classic Accordion<\/strong> widget is added.<\/p>\n\n\n\n\"minus\n\n\n\n

The next thing you should do is choose the content type. If you need to add simple text content, select Editor<\/strong> from the dropdown. But the coolest thing is that you can alternatively choose a template that you have created previously to be displayed, so you’re not actually limited by the content type. Any content from the template you’ve got will be displayed in the accordion block. Select Template<\/strong> option in the Content Type<\/strong> dropdown and select the needed template from the list (if you haven’t got any templates yet, make sure to create one, and only then select it).<\/p>\n\n\n\n\"choose\n\n\n\n

Customize the other accordion block items, and add as many as you need to have in your accordion.<\/p>\n\n\n\n

Let\u2019s switch to the Settings<\/strong> tab. Here you can enable Collapsible<\/strong> option, which allows leaving the item unwrapped. Also, select the Show Effect<\/strong> to apply it when the content opens up or closes.<\/p>\n\n\n\n\"Classic\n<\/div><\/div>\n\n\n\n

How to Style Up the Accordion<\/h2>\n\n\n\n
\n

As usual, in Elementor,<\/strong> you can style each element of the section. You can adjust the colors of the accordion container, toggle, toggle fields, and the content of the toggle.<\/p>\n\n\n\n\"accordion\n\n\n\n

Note that you can adjust the style of the accordion itself as well as edit the templates which you’ve selected to be shown inside the accordion blocks. Just click the Edit Template<\/strong> button shown on top of the template in the accordion block, and you\u2019ll be redirected to the page of the particular template, where you can make changes.<\/p>\n\n\n\n

Also, proceed to Advanced settings<\/strong> and customize margin, padding values, responsiveness, etc.<\/p>\n<\/div><\/div>\n\n\n\n

Hope this tutorial makes it clear, and now you can go ahead with displaying content using the Classic Accordion<\/strong> widget.<\/p>\n","protected":false},"excerpt":{"rendered":"

Look through this tutorial in order to learn more about displaying content using the Classic Accordion widget.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[495],"yoast_head":"\nHow to Use Accordion Layout to Display Content in Tabs \u2014 JetTabs<\/title>\n<meta name=\"description\" content=\"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.\" \/>\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-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Accordion Layout to Display Content in Tabs \u2014 JetTabs\" \/>\n<meta property=\"og:description\" content=\"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T12:55:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_2-1-1.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=\"4 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-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/\",\"name\":\"How to Use Accordion Layout to Display Content in Tabs \u2014 JetTabs\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-02-12T14:08:04+00:00\",\"dateModified\":\"2023-06-08T12:55:32+00:00\",\"description\":\"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-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 Content in the Classic 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 Use Accordion Layout to Display Content in Tabs \u2014 JetTabs","description":"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.","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-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Accordion Layout to Display Content in Tabs \u2014 JetTabs","og_description":"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/","og_site_name":"Help Center","article_modified_time":"2023-06-08T12:55:32+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_2-1-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/","name":"How to Use Accordion Layout to Display Content in Tabs \u2014 JetTabs","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-02-12T14:08:04+00:00","dateModified":"2023-06-08T12:55:32+00:00","description":"Study how to create a compact Accordion to display your content in tabs layout with the help of JetTabs plugin by Crocoblock team.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettabs\/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-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 Content in the Classic 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\/6590"}],"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=6590"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=6590"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=6590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}