Tell us what you are trying to do?
Implement an accordion dynamically populated by a View, but without using an accordion shortcode plugin.
I have a View which retrieves entries from a particular CPT, and I want the results to form the content (i.e. panel headings and content) of an accordion structure. That is, I want the CPT 'title' value to populate the accordion panel heading, and I want the CPT 'excerpt' value to populate the accordion panel content.
I understand how to implement the jQuery code as long as I can either determine (or assign) the relevant id/class values to the accordion structure. However, I don't know the best way (or if it's even possible) for Views to generate the HTML code to support the accordion. My concern is that View may be generating HTML that is too complex to be used by the native jQuery accordion function.
For example, should the Views output (for each retrieved CPT entry) be unformatted? Bootstrap? Other?
How can the View results be wrapped in an appropriate container required to support the accordion function?
Is there any documentation that you are following?
Can't find any relevant items in the Toolset documentation.
Is there a similar example that we can see?
hidden link
What is the link to your site?
I was able to achieve my goal of generating a basic accordion structure using output from a View.
I will continue to experiment with additional accordion features and will advise of any issues.
Is there any reason that accordion functionality is not mentioned anywhere in the Toolset documentation?
That is, there have been other threads regarding accordion-based issues, so it's clear that they are being used.
We do not document this because it's a Bootstrap for even HTML feature, not a Toolset feature, and to use Toolset the HTML and CSS/JS languages are required knowledge sets.
What you will do to create your list of posts as accordions is:
- create your View as usual
- create a loop manually and insert the HTML markup you need to create the accordion.
==> Replace unique ID's with as example post ID ShortCode.
- Then insert the Toolset ShortCodes in the relevant HTML markup of the accordions body.
The loop will iterate over all posts and generate the same HTML output for each post.
The final Loop output should look something like this (made with a Bootstrap accordion)
<wpv-loop>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapse-[wpv-post-id]" aria-expanded="false" aria-controls="collapse-[wpv-post-id]">
[wpv-post-title]
</a>
<div class="collapse" id="collapse-[wpv-post-id]">
<div class="well">
[wpv-post-excerpt]
</div>
</div>
</wpv-loop>
