Accordion does not work

Hi @nro1,

Please put the below CSS code in plugin custom CSS

.collapse.in {
    display: block !important;
} 

If it works let us know

Thanks for the reply.

No, it does not work.

What next?

Hi @nro1,

We checked the URL you shared and we are seeing that the accordion is working fine please check it again.

Thank you

I’m having a similar problem here:

https://buffalocal.com/search-all-beers/

I have created some CSS that allows a collapsed accordion to display as open at larger screen sizes, then collapse later:

.wpsm_panel-group .collapse {
display: block !important;
height: auto !important;
}

.collapse.in {
display: block !important;
height: auto !important;
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.wpsm_panel-group .collapse {
display: none !important;
height: 0 !important;
}

.collapse.in {
display: block !important;
height: auto !important;
}
}

@media only screen and (max-width: 768px) {
.wpsm_panel-group .collapse {
display: none !important;
height: 0 !important;
}

.collapse.in {
display: block !important;
height: auto !important;
}
}

This was working everywhere until today. I had to rollback to v2.2.8 due to an issue with accordions not saving correctly (see https://www.ads-software.com/support/topic/shortcodes-in-accordion-not-displaying-any-data-2/) and now suddenly these accordions no longer open when I get to 768px screen sizes. It works on Chrome, and even on Safari on my iPhone, but not on Safari on my laptop.

Just to be clear, what appears to be happening (in Safari on my laptop) is that the click action is not even occurring. If I click on the accordion, the “in” class is not added to the accordion. I don’t think this is a CSS issue, since it has worked in Safari on my laptop up until now, and is currently working in other browsers.

• This reply was modified 3 years, 4 months ago by dcbuffalo.

Hi @dcbuffalo

Please share that link where you have used the accordion.

Thank you

It is used on many pages – here are a few:

https://buffalocal.com/search-all-beers/
https://buffalocal.com/brands/12-gates-brewing/
https://buffalocal.com/styles/ales/

At full desktop size, the accordion is in the left sidebar (Sort & Filter Results) and CSS makes it look like it isn’t an accordion. Once the screen gets to 768px (or a portrait-orientation tablet) the CSS goes back to normal accordion functionality. Again, the problem appears to be something else, as it works on Chrome just fine, and even on Safari on mobile phones, but not on Safari browsers at 768px or smaller or Safari on tablets.

Hi @dcbuffalo

Please put the below CSS in plugin custom CSS

@media only screen and (max-width: 768px){
.wpsm_panel-group .collapse {
    display: block !important;
    height: auto !important;
}
}

@media only screen and (max-width: 768px){
#wpsm_accordion_14684 .ac_open_cl_icon {
    display: none !important;
}
}

If it works let us know

Thank you

Both of those are already there. Still doesn’t work, same situation.

By the way, did the bug get fixed where the update meant that I couldn’t save an accordion without it deleting the custom CSS? It was v2.3.1, and there isn’t a v2.3.2 yet.

• This reply was modified 3 years, 3 months ago by dcbuffalo.

It appears to be working again (still on v2.2.8). Can you confirm? When can I expect a v2.3.2 with this update in it?

Hi @dcbuffalo,

We will find that issue soon and update it with your compatibility. Till then you can use this previous version.

Thank you

Did you ever find this issue and fix it? I am still using version 2.2.8.