{"id":38969,"date":"2023-04-04T14:46:26","date_gmt":"2023-04-04T14:46:26","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&p=38969"},"modified":"2024-05-08T13:18:09","modified_gmt":"2024-05-08T13:18:09","slug":"displaying-custom-repeater-fields-in-the-accordion-widget","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/","title":{"rendered":"Displaying Custom Repeater Fields in the Classic Accordion Widget"},"content":{"rendered":"\n

With the JetEngine <\/em>and JetTabs <\/em>plugins, you can display information from the repeater field<\/a> in a Classic Accordion<\/strong><\/a> <\/strong>widget. For instance, you can showcase details about the different days of a tour on its single page or recreate the steps according to your use case.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The presented use case is taken from the Travengo Dynamic Template<\/a>, available for installation for All-Inclusive set owners with the help of the Crocoblock Wizard.<\/p><\/div><\/div>\n\n\n\n

Creating the Custom Repeater Meta Fields<\/h2>\n\n\n\n
\n
\n

Navigate to the WordPress Dashboard > JetEngine > Post Types<\/em><\/strong> directory and open a Custom Post Type<\/strong> editor where you want to add the repeater fields.<\/p>\n\n\n\n

Scroll to the Meta Fields <\/strong>tab and press the \u201cNew Meta Field<\/strong>\u201d button.<\/p>\n\n\n\n

Complete the Label <\/strong>and Name\/ID <\/strong>fields <\/strong>with the desired values.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The Name\/ID<\/strong> value should include only Latin letters, numbers, and \u201c-\u201d or \u201c_\u201d characters with no spaces and capital letters.<\/p><\/div><\/div>\n\n\n\n

Leave the default \u201cField\u201d Object type <\/strong>and set \u201cRepeater\u201d as a Field type<\/strong>.<\/p>\n\n\n\n

Follow the detailed guide through the Repeater meta field creation process<\/a> and add the necessary fields to the repeater by pressing the \u201cNew Repeater Field<\/strong>\u201d button.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Firstly, we build a meta field<\/a> for the label of the tab. For example, it can be a \u201cText\u201d field as presented in this tutorial.<\/p>\n\n\n\n

\"first<\/a><\/div>\n\n\n\n

One more \u201cWYSIWYG\u201d field is built for the content of the tabs.<\/p>\n\n\n\n

\"wysiwyg<\/a><\/div>\n\n\n\n

Once all the needed fields are created, click the \u201cUpdate Post Type<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Filling the Fields Within the Posts<\/strong><\/h2>\n\n\n\n
\n

Go to each Custom Post Type<\/strong> post, scroll down the page, and add the needed information to the just-added repeater fields.<\/p>\n\n\n\n

As the repeater fields will be displayed in the accordion tabs, you should add as many blocks with information as needed. For instance, in the case of the tours, each one will have four or more days.<\/p>\n\n\n\n

\"days<\/a><\/div>\n\n\n\n

Once you\u2019re done, update the post. <\/p>\n\n\n\n

Repeat the same procedure with all the needed posts and proceed to the next step.<\/p>\n<\/div><\/div>\n\n\n\n

Building a Query<\/h2>\n\n\n\n

Go to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and press \u201cAdd New<\/strong>\u201d to create a new query<\/a>.<\/p>\n\n\n\n

In the General Settings <\/strong>section, set the Name <\/strong>and define the Query Type<\/strong>, now it should be set to \u201cRepeater Query<\/a>.\u201d<\/p>\n<\/div><\/div>\n\n\n\n

\"new<\/a><\/div>\n\n\n\n

In the Repeater Query <\/strong>section, specify the Source <\/strong>of the query \u2014 \u201cJetEngine Meta Field.\u201d<\/p>\n\n\n\n

As the JetEngine Field<\/strong>, select <\/strong>the \u201cRepeater\u201d meta field that you built earlier based on the Creating the Custom Repeater Meta Fields<\/a> <\/strong>part of the article.<\/p>\n\n\n\n

In the given case, we leave the Object ID <\/strong>field empty as we want to display the repeater on the Single page of the corresponding post. However, if you will work with a static page, you should complete this field with the ID of the needed post.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

If your repeater has many fields and you need to pull out only several of them in this query, you can proceed to the Query Arguments<\/strong> section and repeat the following steps. If not applicable, just click the \u201cAdd Query<\/strong>\u201d button at this point.<\/p><\/div><\/div>\n\n\n\n

Press the \u201cAdd new<\/strong>\u201d button under the Query Arguments <\/strong>section to connect the repeater fields to this query.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Put the Name <\/strong>of the needed repeater field as the Field key\/name<\/strong> and set its Compare <\/strong>operator to \u201cExists.\u201d<\/p>\n\n\n\n

You can add more fields by pressing the \u201cAdd new<\/strong>\u201d button once again.<\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

After the changes are made, press the \u201cAdd Query<\/strong>\u201d button.<\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

Working with the Accordion Widget<\/strong><\/h2>\n\n\n\n
<\/svg><\/div>
Things to know<\/div>

The repeater fields can be displayed with the Classic Accordion<\/strong> on a static page as well. In the described case, we will demonstrate how to output it on the Single template. To do so, you need the JetThemeCore<\/a> plugin installed and activated on your website with the Single Post Page Template<\/a> created.<\/p><\/div><\/div>\n\n\n\n

Head to WordPress Dashboard > Crocoblock > Theme Templates<\/em><\/strong>. Open the Single Page <\/strong>in Elementor and drop the Classic Accordion<\/strong> widget.<\/p>\n\n\n\n

Activate the Use JetEngine query <\/strong>toggle and pick the just-created query in the Select Query <\/strong>field.<\/p>\n\n\n\n

Then, delete the two last items presented by default as toggles so only one is left.<\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

Open the Toggle #1<\/strong> tab and press the  \u201cDynamic Tags<\/strong>\u201d button next to the Label <\/strong>field.<\/p>\n\n\n\n

Choose the \u201cCurrent Object Field\u201d macro from the list.<\/p>\n\n\n\n

\"current<\/a><\/div>\n\n\n\n

Once clicked, the additional customization fields are displayed.<\/p>\n\n\n\n

As the Field<\/strong>, pick the repeater field you want to display as the tab label. You can find the needed field below the label of the query that we have assigned to repeater.<\/p>\n\n\n\n

\"label<\/a><\/div>\n\n\n\n

Then, set the Content Type<\/strong>. If you use the \u201cTemplate\u201d Content Type<\/strong>, you should pick the template (Choose Template <\/strong>field) that contains the Dynamic Field<\/strong><\/a> <\/strong>with the needed repeater field set as an Object Field<\/strong>.<\/p>\n\n\n\n

However, in the described case, we select the \u201cEditor\u201d option. Here, press the \u201cDynamic Tags<\/strong>\u201d button and select the \u201cCurrent Object Field\u201d macro from the list.\u00a0<\/p>\n\n\n\n

Select the needed Field <\/strong>to be displayed as the content of the tab.<\/p>\n\n\n\n

\"content<\/a><\/div>\n\n\n\n

Style up the widget and update the page once you\u2019re done with the settings.\u00a0<\/p>\n\n\n\n

On the front end, the Classic Accordion <\/strong>widget will display the information you previously entered into the repeater meta fields of the post.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n<\/div><\/div>\n\n\n\n

This is all about displaying custom Repeater fields in the Classic Accordion<\/strong> widget, which is available with the JetTabs <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Display custom repeater fields in the Classic Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[359,380],"yoast_head":"\nDisplaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.\" \/>\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\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-08T13:18:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/repeater-meta-field-1024x640.webp\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/\",\"name\":\"Displaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-04-04T14:46:26+00:00\",\"dateModified\":\"2024-05-08T13:18:09+00:00\",\"description\":\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Displaying Custom Repeater Fields 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":"Displaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock","description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.","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\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/","og_locale":"en_US","og_type":"article","og_title":"Displaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock","og_description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/","og_site_name":"Help Center","article_modified_time":"2024-05-08T13:18:09+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/repeater-meta-field-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/","name":"Displaying Custom Repeater Fields in the Accordion Widget \u2013 JetTabs & JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-04-04T14:46:26+00:00","dateModified":"2024-05-08T13:18:09+00:00","description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to create repeating blocks sets and easily display the needed information.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-custom-repeater-fields-in-the-accordion-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Displaying Custom Repeater Fields 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\/tips-and-tricks\/38969"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=38969"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=38969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}