Skip Navigation

[Resolved] Bootstrap Accordion View

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 5.56 hours from now. Thank you for your understanding.

This topic contains 7 replies, has 2 voices.

Last updated by Luo Yang 1 year, 9 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1285709

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

#1285711

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

#1285713

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.

#1285727

I fixed it for now. I may follow up.

#1285829

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

#1286147

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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%;
}
#1286455

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.

#1286961

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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