How to hide a fields on checkbox

Question

I would like to create a dialog with three fields and a checkbox. If deselected it must hide the fields, if selected show them. I would also like a version without js.

sarav_prakash · Accepted Answer

You tried and it didnt work? If you can share your dialog xml, can point if any mistakes.

To get started, copy a working dialog from ootb component and edit. Search `cq-dialog-dropdown-showhide-target` at crx, it shows the components implementing showhide. Duplicate the dialog from say /libs/foundation/components/list/cq:dialog/content/items/column/items

and then edit on top.

NOTE: Foundation components are deprecated. Use wcm core components for better reference.

For steps:

Start by adding selectbox into your dialog
Add the class and property `cq-dialog-dropdown-showhide-target`. Preferably use similar values as ootb
The value property in each child item is used to unhide respective elements
Then after the selectbox, start adding the subsequent containers. All containers will be hidden by default.
The conditional container will include a class `hide list-option-listfrom-showhide-target`. `hide` class hides the container on load of dialog. And `list-option-listfrom-showhide-target` matches to value of property cq-dialog-dropdown-showhide-target.
Thats all, this should work. To troubleshoot, check if granite list clientlib is loading, else add its clientlib or extend your component with core listv4 component.

sarav_prakash · Answer

There is no-js option using ootb dropdownshowhide

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/hide-conditions

You need to leverage granite/ui/components/coral/foundation/form/select. Instructions are provided in /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

* - add the class cq-dialog-dropdown-showhide to the dropdown/select element
* - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the
* selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
* - add the target class to each target component that can be shown/hidden
* - add the class hidden to each target component to make them initially hidden
* - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
* option that will unhide this element.

Majority of youtube videos, blogs, explain writing custom showhide.js. But not required. ootb dropdownshowhide should work seamless.

Sign up

Login with SSO

Login to the community

Login with SSO