[SOLVED] collapse search field

Is there a way to collapse a search field?
for example I have 3 fields with 'Check Box (Multiple)' with more then 20 items. I want make the label clickable to show and hide al the checkboxes for each label.

I looked if i could do something with css but all examples that i found needed a input= checkbox or button to click on or html code.

html example

We provide no such functionality out of the box. You'd need to write all the necessary JS for that. You can then add the JS to profile edit and registration display triggers using CB Auto Actions and a Code action or by adding the JS to your Joomla template for it to load a custom JS file.

Even as a paying user you apparently get an IP block if you try to post a solution to your own question to help others.
This without proper notification so i posted i test message which a wanted to edit but when i`m going to try that i probably get also blocked on my current VPN connection.

So I have an answer which i cannot share.

Hi,
Thanks a lot for sharing your solution, or actually attempting to share it.

Your message was unfortunately intercepted by our Web Application Firewall (which is clearly a false positive), and then after multiple trials, the temporary IP block kicked in. Both are part of the extensive security framework of our own Joomlapolis hosting keeping our servers and sites safe since almost 15 years.

I have now added the necessary exceptions for forum posts, and also unbanned the IPs that got temporarily blocked by this rule, so that you can post your solution. Please also see the reply by email.

Sorry about that "false positive".

Thank you
Here is the message that i wanted to post earlier:


For other users and my own documentation the answer:

Load jquery:

Hide input element at load. The div id contains the input elements and is constructed with the ID of the field, 65.

The click on function is set on the labels which is constructed with the fieldname. When clicked it will change the display status of the div (cbfv_65).

One small thing, the first time you need to click twice to unfold it.

For Gantry template users
Go to page settings:
Custom Content - the load jQuery script.
Add an atom 'Custom CSS / JS' - place here the css and javascript, check the 'Before </body>' option.
It was not possible to load the atom only on the particular pages like a module. If you want that you should make a separate template only for those pages.

I suggest using CB Auto Actions to insert custom search JS. Do not load jQuery manually. Either let CB do this or Joomla do this with their respective APIs. Example as follows for loading custom jQuery on userlists.

Global
Triggers: onBeforeDisplayUsersList
Type: Code
User: Automatic
Access: Everybody
Action
Method: jQuery
Code: