responsive?

Which widget? Making a responsive accordion is very different to making a horizontal accordion… ??

I have the horizontal accordion added to a responsive template. I was wondering if there was a way I could add the 100% or media min-width max-width through css.

Hi Andrew,

I’m afraid I don’t think it’s currently possible to create a responsive horizontal accordion: The liteAccordion script has to be passed an explicit width for the horizontal accordion widget. It then uses this to set a width in the html on the outermost element. You could override this with an !important directive in your CSS and it might work on page load, but if anyone changes the size of the browser it will cause oddities in the horizontal accordion.

I’ve not tested any of this though, and so you’re more than welcome to have a go, but I honestly think you’re on a hiding to nothing. Right now this plugin doesn’t support responsive horizontal accordions (maybe one day in the future if I find time I’ll add support to the liteAccordion script).

If you want to give it a go then please take a look at https://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/#styling (read the “General” tab first to get an idea of how styling works in general in Squelch TAAS and then move onto the “Horizontal Accordions” tab for the specifics).

I expect you’ll end up with something like this:

@media screen and (max-width: 600px) {
    .squelch-taas-haccordion.yournewthemename {
        width: 580px !important;
    }
}
@media screen and (max-width: 400px) {
    .squelch-taas-haccordion.yournewthemename {
        width: 380px !important;
    }
}

If you have any luck please let me know!