Accordion collapse select area

Permalink Browser Info Environment
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.


Type: Pre-Sale
Status: Resolved
View Replies:
hypotenuse replied on at 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,
pilipala replied on at Permalink Reply
Hi Russell,

That is strange that the reply disappeared. It is on this thread below, not sure why that happened.

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

Best wishes,

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.7
Version Installed - 8.5.7
Database Version - 20210623000000

# Database Information
Version: 10.3.31-MariaDB

# concrete5 Packages
Cariad (1.0.2)

# concrete5 Overrides

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software

# Server API

# PHP Version

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, imap, intl, ionCube Loader, json, ldap, libxml, mbstring, mcrypt, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 91
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 90
max_input_vars - 1000
memory_limit - 128M
post_max_size - 200M
sql.safe_mode - Off
upload_max_filesize - 2M
ic24.api.max_timeout - 7
ldap.max_links - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:97.0) Gecko/20100101 Firefox/97.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.