I am trying to make a view that displays each post as a clickable accordion element. I want the heading of each accordion element to feature the post title, once you click the accordion it should display a 500 charcter snippet of the post body, the featured image, taxonomy details and a button to the post. To the left there should be three filters, but right now I'm just trying to get the posts to display period. The site uses BeaverBuilder and BeaverThemer which is why I am not using the toolset visual builder plugin. I am comfortable with custom html & css.
I am trying to follow these steps and adjust them to my needs, but I am not able to create anything functional: https://toolset.com/forums/topic/split-displaying-terms-in-accordion-style-list-with-embedded-view/. I included a link to the current view. I've been testing things I'm pretty confident won't do anything, and am going to re-start from scratch again. The closest I got to a correct view was having a title and body content display but the only clickable element was the first one.
Link to a page where the issue can be seen: hidden link
I expected to see: https://toolset.com/forums/topic/split-displaying-terms-in-accordion-style-list-with-embedded-view/
Instead, I got: hidden link
Update, it seems the only accordion element that expands is the first one for some reason. I made a version with filters and plugged in the same code, that seemed to break the view entirely. Please advise how I can make the accordions all clickable and the filters functional as in this example you previously provided: hidden link
One more update, I was able to resolve why only the first item would open. What I'm struggling with is how to maintain this accordian view when I make it searchable via filters.
I want the finished product to implement drop down filters (similar to this page: hidden link but styled differently).
If I try to duplicate my accordion view as a new view with filters, it seems to break. hidden link
This page has 2 versions of the view. One functional w/o filters and one a drop down menu that breaks the accordion.
I fixed it for now. I may follow up.
Ok, one last question on the accordion view. What is the best way entire accordion div the link versus just the post title?
Here is an example of an accordion view where each accordion entry header is a link: hidden link
Here is my view I created with Toolset: hidden link
Hello,
For the question:
What is the best way entire accordion div the link versus just the post title?
You can use CSS codes to make the post title link full width, for example:
a[data-toggle="collapse"]{
display:block;
width:100%;
}
That code is helpful, but did not fully solve the issue. It makes the link full width, but I'm looking to make the entire grey box clickable.
Please try to modify the CSS codes as below:
a[data-toggle="collapse"] {
display: block;
width: 100%;
height: 100%;
padding: 10px 15px;
}
.panel-heading {
padding: 0px 0px !important;
}
And test again
