Tell us what you are trying to do?
I have a view which loops through all my categories and generates an accordion. But I need to collapse only the first category which has posts. What I need is a count which will be set to zero outside the loop and then will be incremented to 1 once a category with posts exists. A this point it should give the div a class "collapse in" and all other subsequent categories should not be collapsed.
In php it will be something like looping through with foreach and for $i = =1 we give the div a class and for all others, we give no class or a different class.
How can this be achieve with Toolset. I have already built in the accordion on my site, all what is lacking is this class for the first div
Is there any documentation that you are following? Not really
Is there a similar example that we can see? hidden link
What is the link to your site? hidden link
There's not an easy way to do this in Views, because there isn't a mechanism for setting or inspecting a global variable during each iteration of the loop. The only approach I can think of requires custom JavaScript to manipulate the DOM based on the number of results in each term's nested View results. Something like this:
This code assumes each nested View that contains post results will have at least one div.row, and each View that contains no post results will not contain any div.row. It will append the CSS classes collapse and in to the results-container-* div if results are found in its nested View. If I've misunderstood what you're trying to accomplish, let me know and I can take a closer look.
Hi christian, I don't know if you properly understood what I was saying . I have already implemented the accordion as you can see on this page hidden link
The problem is simply the fact that all the panels(divs) are collapsed in. I just need to collapse the first one and then have the accordion working as it should. I thought this could be achieved with a shortcode with returns the 1 for the first time a post exists for a category in the loop. Then this dive will be assigned the collapse in class, "else" all others will not.
Thanks
I have already implemented the accordion as you can see on this page
I think you're right, I'm not sure what you're trying to accomplish. When I think of an accordion, it should have clickable headers that related toggle content panels on or off. Your example does not seem to do this. It has some elements that are completely hidden using display:none, and other elements that are shown using display:block. When I click a header the page scrolls to that element. Nothing opens or closes, as implied by the term "accordion". Can you explain how it works in technical terms? What exactly determines the on or off status? Why are some elements completely hidden with display: none?
I thought this could be achieved with a shortcode with returns the 1 for the first time a post exists for a category in the loop.
No such shortcode exists, unfortunately. You may be able to accomplish this with custom code, but it falls outside the scope of the support we offer here in the forum. The solution I can offer here is JavaScript-based. It works by adding a specific class to the first accordion element that contains a post in its nested results. If there is a better way to control the open/closed status of each accordion element using JavaScript and CSS, please explain it to me and I will gladly adjust the script.
Hi Christian, I guess I should ask my question in a general way. So how does an accordion function with Toolset if you are pulling the information dynamically and not manually?
For example, in my case I have 2 loops, one is the parent and one is the child. The parent loop consists of the clickable headers and child loop consists of the toggled contents.
The "display:none," simply hides all parents which have no child posts(so headers without toggle contents), leaving an accordion with headers and toggle contents.
As you can see on this link, hidden link, an accordion does work normally if I don't use Toolset.
Thanks for any help you could provide. I think the underlying issue is to know if accordions function normally with loops.
So how view will handle the accordion is that Lets say you have the accordion structure like this.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
Now in bootstrap 4 the div class with "Card" represents a single accordion.
In views it would look like this.
[wpv-items-found]
<!-- wpv-loop-start -->
<div id="accordion">
<wpv-loop>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
So as you can see I've added the accordion main div outside the view loop but the Cards are within the loop, So each time it loops a new accordion is added.
Hi Shane, it does not quite work for me. Moreover, my Toolset set tells me that it is using Bootstrap 3.0. How do I update to 4.0? Also I want only the first item to be displayed while the others are closed. Since you have the login details, could you try it with my own example? I also created another test view(hidden link) with which you could test without any fear of breaking anything.
Thanks for you help thus far.
Francis
Hi Shane, I think the best thing for me will be to do this on my own using PHP and Javascript.
I was just wondering if there is a developer manual and how I can best call all the functions used with Toolset.
Thanks for your help.
