Hello, I see that Elementor offers integration with ACF repeater fields to create dynamic accordions. Unfortunately Toolset's repeatable field groups (RFGs) are not directly integrated with Elementor's accordion element in the same way. There are no built-in accordion widgets or blocks provided in Toolset that would help create this feature with a few simple clicks. To create a dynamic accordion using RFGs, you could use the legacy Views editor to manually recreate the looping HTML markup structure necessary to generate the accordion elements, add Types field shortcodes to display custom field content in each accordion row, and apply custom JavaScript to handle the accordion interactions. It would require intermediate level understanding of HTML, JavaScript and CSS to implement something exactly like this with Toolset and custom code.
Another option does not require custom JavaScript, but still requires some understanding of HTML, CSS and our Types and Views shortcodes. It is possible to have Toolset load the Bootstrap library, which provides a component called "Collapse". It is possible to use the Bootstrap collapse component to create a similar accordion interface, as shown in the example here:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
With the legacy View editor you could loop over the RFG rows in a post and generate the necessary markup and CSS classes as shown in the example. I can help implement this type of collapsible structure with a View of RFGs if you would like to explore this option. You must choose one of the options to enqueue the Bootstrap library. The code example here is written for version 4.
If you are not already using the legacy Views editor, you may need to enable it. Go to Toolset > Settings > General and choose the editing experience option "Show both the legacy and Blocks interface and let me choose which to use for each item I build" to enable both the Block Editor and the legacy editor. Then you will find a new menu item in the main wp-admin menu. Go to Toolset > Views to create a new View. In the first popup, choose the option that will "display all results". In the Content Selection area of the main View editor, select the RFG. If you plan to display this accordion in the template for the post type that contains this RFG, scroll down to the Query Filter panel and add a new Query Filter for Post Relationship or Repeatable Field Group Owner. Configure the filter to show the RFGs as related items of the post where the View is shown.
Then scroll down to the Loop Wizard and click "Skip Wizard". Just before the opening wpv-loop tag, add the line that starts the accordion code:
<div class="accordion" id="accordionExample">
You can choose any unique ID to identify this accordion, instead of accordionExample, if you prefer something else.
In between the wpv-loop tags, add this code:
<div class="card">
<div class="card-header" id="heading-[wpv-post-id]">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse-[wpv-post-id]" aria-expanded="true" aria-controls="collapse-[wpv-post-id]">
Customize panel header text here. See shortcode examples in panel body below.
</button>
</h2>
</div>
<div id="collapse-[wpv-post-id]" class="collapse" aria-labelledby="heading-[wpv-post-id]" data-parent="#accordionExample">
<div class="card-body">
[wpv-post-title] - This shortcode normally displays a post title. For RFGs, this shortcode will display the RFG row "internal title" text if any is provided for this row of the RFG.
[types field="parent-field-slug" item="@rfg-slug.parent"][/types] - Display custom fields from the parent post using a Types field shortcode. Replace parent-field-slug with the slug of the custom field in the parent post, and replace rfg-slug with the slug of the RFG.
[types field="rfg-field-slug"][/types] - Display custom fields from this row of the RFG. Replace rfg-field-slug with the slug of the custom field.
</div>
</div>
</div>
If you changed the ID accordionExample in the opening accordion code, you should replace the text accordionExample again here in this snippet. Paste the following code below the closing wpv-loop tag to close out the accordion element:
Place this View in the template for the custom post type containing the RFG, and you'll see an accordion appear in each post with one accordion panel per RFG row.
See our documentation for other shortcode examples:
https://toolset.com/documentation/customizing-sites-using-php/functions/
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/item-attribute/
