Dear all,
I have created a custom post type for products and want to display the archive using an accordion. I am currenly using the Kadence accordion in combination with toolset.
Already working:
The title of each accordion section shows a short description (post title + information stored in extra fields) on a single line. This is done with an extra "content template" of which the shortcode is copied in the title of the accordion section (as suggested by Christian Cox).
When the accordion is closed, this results in a "table look".
When a section of the accordion is clicked, it unfolds and shows extra product information.
Remaining issue:
The accordion block is inserted in the "archive view" editor. However, this will create 1 accordion for every item in the archive.
Then each accordion has 1 section with the title and the details. This results in a page with as many accordions as there are items in the archive. For what I'm doing, it would be more logical to have 1 accordion, and then have 1 section for each item in the archive. This way, the complete archive is behaving more consistent. It is basically like having many tables that have only 1 row, instead of 1 table having many rows.
I'm aware that this may not be possible with the Kadence accordion, since the code cannot be splitted so only the accordion items (rows) are inside the archive loop, and the accordion header (table) is outside the loop. Is there a solution, possibly with an other accordion then the Kadence? Toolset accordion? 🙂
I have attached a few images of the final output as well as of a part of the code
Thanks,
Ken
Hi Ken,
Thank you for contacting us and I'd be happy to assist.
To create a dynamic accordion from the view or archive's results, you can use the Bootstrap 4 accordion feature:
hidden link
This way, you'll have the full control over the output of the archive items and won't have to include any other third-party plugin or script.
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar