[Resolved] accordion as master-detail for archive

[Author]

Posts

[KenS195]

Tell us what you are trying to do?

use "accordion layout" as "loop item" to create a "master-detail" list of archive (custom post type for products).
-> closed accordion looks like archive list : each title bar is like a table row (main product data - excerpt)
-> accordion opened on element: open panel shows extra details about the archive list item (product details)
-> the detail panel of the accordion should have 3 tabs (product dimensions (grid) / images / downloads)

Is there any documentation that you are following?
I did read some similar topics like link below, but maybe there is a better solution with the new "Toolset Blocks" (no Layouts, no Views).
-> https://toolset.com/forums/topic/repeating-fields-for-accordion

Is there a similar example that we can see?
-> no

What is the link to your site?
-> not available

[KenS195]

Hi again,

I experimented a little with "KADENCE BLOCKS" as suggested by Christian Cox in following topic:
-> https://toolset.com/forums/topic/accordion-template/

I was wondering how it would be possible to control the title of each accordion item (so I can use the post title or any other post data).

Thanks,
Ken

[Christian Cox]

Hello, unfortunately there hasn't been any notable progress on a Toolset-based accordion block for the block editor. The Kadence accordion block could be a reasonable alternative for now.

I was wondering how it would be possible to control the title of each accordion item (so I can use the post title or any other post data).
For fields that only accept text, you must use Toolset's shortcodes. You can manually type them in, or copy + paste them from another area. The list of Views shortcodes is available here, with information about the options you can add:
https://toolset.com/documentation/user-guides/views/views-shortcodes/

To display the post title in the accordion item title area, you would use the wpv-post-title shortcode:

[wpv-post-title]

To display custom field information, you should use Types field shortcodes instead of Views shortcodes. Those are documented here: https://toolset.com/documentation/customizing-sites-using-php/functions/
Click "+More" to see more examples of each field type.

Let me know if you have questions about using Toolset's shortcodes in a Kadence accordion block.

[KenS195]

Hi Christian,

yes that works!
see hidden link

The bad news is that I want something extra now:
I want to add some icons in the title section (where the logo is now), but they need to change color depending on specific product data (stored in the custom types fields). Similar to the layout in attached image.

I have a separate image file for each icon/color. So I would just need to select the correct file, based on the value of the corresponding types field. Can this be done using (custom) short code so it is interpreted as HTML and not as plain text?

Thanks a lot!
Ken

[KenS195]

Hi,

that link was wrong, it should be
hidden link

BR,
Ken

[Christian Cox]

Well I'm not really sure what all Kadence supports in the title area offhand. They do seem to support Views shortcodes like wpv-post-body, so one option would be to create a Content Template, add your conditional logic using blocks or shortcodes, then insert that Content Template in the accordion title area using a wpv-post-body shortcode. A Font Awesome solution would be great here too, or some other small icon graphics like https://icons.getbootstrap.com/ from Bootstrap.

[KenS195]

Hi Christian,

yes I'm getting there. It looks like the title field accepts the toolset shortcodes, but any straight HTML was considered as text.
Just for testing, I created an extra field in my custom post type with some HTML in it, and this way it actually works!
So I can just render an icon on its URL which is stored in the product details.
Problem solved until I get more greedy 🙂

I'll have a look at your other suggestions as well.

Thanks
Ken

[KenS195]

My issue is resolved now. Thank you!