Monitor Reply

Support

Accordion collapse select area

Permalink Browser Info Environment January 29, 2022 at 9:37 PM

Good evening.

Is there a way to change the Accordion collapse area to trigger on selecting the panel rather than the title of each tab? The site we are developing has a single short word for each panel, for instance 'Car' and it would be more elegant to select the whole panel the word is situated on.

Thanks.

Type:	Pre-Sale
Status:	Resolved

hypotenuse replied on Jan 29, 2022 at 9:44 pm Permalink Reply

Hello Jennifer.

I thought I caught an earlier reply from you which appears to have disappeared.

I think I have found a way around this that is acceptable for mobile devices.

In themes/cariad/css/build/blocks/accordion.less I altered:

h4.panel-title-cariad {
   font-size: 16px;
   text-transform: uppercase;
   padding: 5px;
}
.panel-title-cariad > a {
   color: @accordion-heading-color;
}

h4.panel-title-cariad {
   font-size: 16px;
   text-transform: uppercase;
}
.panel-title-cariad > a {
   color: @accordion-heading-color;
     display: block;
   padding: 10px 0px;
}

This allowed a finger select anywhere on the coloured bar to then show and collapse the panel beneath the bar.

Best wishes,
Russell

pilipala replied on Jan 30, 2022 at 8:51 pm Permalink Reply

Hi Russell,

That is strange that the reply disappeared. It is on this thread below, not sure why that happened.https://marketplace.concretecms.com/marketplace/themes/cariad/suppor...

I think your solution is better than the one that I saw on the internet. Thanks for sharing!

Best wishes,
Jennifer

Cariad

Support

Accordion collapse select area

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post