Hi Christoph,
Thank you for contacting us and I'd be happy to assist.
You can use a Toolset post view to show an accordion, with data coming from a repeating field group.
( example of the accordion: hidden link )
Here are the steps:
1. Please make sure that "Toolset should load Bootstrap 4" options is selected at WP Admin -> Toolset -> Settings -> General.
2. Next, you'll add a repeating field group, for the post in which you'd like to show the accordion. In this case, I'm using the post "Project" as an example.
( ref: https://toolset.com/documentation/getting-started-with-toolset/creating-and-displaying-repeatable-field-groups/ )
( screenshot: hidden link )
3. Each accordion item will need to have two fields, title, and the content, so you'll add a single line type field for the title and a WYSIWYG field for the content in this new repeating field group
( screenshot: hidden link )
4. These fields will show on each Project post's edit screen so that the client can add as many accordion items as needed.
( screenshot: hidden link )
5. To show this data on the front-end in an accordion, you'll create a new post view and set it to get results from this new repeating field group.
( ref: https://toolset.com/documentation/getting-started-with-toolset/create-and-display-custom-lists-of-content/ )
( screenshot: hidden link )
6. Since your goal is to show accordion from only those items which are added with the post that is being viewed, you'll add a query filter, with an option: "The post where this View is shown".
( screenshot: hidden link )
7. In the "Loop Editor" section, you'll add the content wrapped in an accordion container:
( screenshot: hidden link )
[wpv-layout-start]
[wpv-items-found]
<div class="accordion" id="accordionProject">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="loop-item-in-view-to-show-project-accordion"]
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Note: Please replace "loop-item-in-view-to-show-project-accordion" with the actual slug of your view's content template.
8. In the view's template, you'll add the code for each accordion item, along with the custom fields shortcode like this:
( screenshot: hidden link )
<div class="card">
<div class="card-header" id="heading-[wpv-post-id]">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-[wpv-post-id]" aria-expanded="true" aria-controls="collapse-[wpv-post-id]">
[types field='accordion-item-title'][/types]
</button>
</h2>
</div>
<div id="collapse-[wpv-post-id]" class="collapse" aria-labelledby="heading-[wpv-post-id]" data-parent="#accordionProject">
<div class="card-body">
[types field='accordion-item-content'][/types]
</div>
</div>
</div>
Note: Please replace "accordion-item-title" and "accordion-item-content" with the actual slugs of your title and content fields.
9. As a result, when you'll insert this newly created view's shortcode inside any Project post, it will show an accordion, from items added with that post.
( screenshot: hidden link )
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
