How to hide a fields on checkbox

[Vodjakxa]

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]

There is no-js option using ootb dropdownshowhide

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

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.

[Vodjakxa]

Thanks for the reply. I have the js, but I don't know how to implement these changes in the dialog. I don't know exactly what to add in the select element and fields.

[sarav_prakash · Accepted solution]

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:

1. Start by adding selectbox into your dialog
2. Add the class and property `cq-dialog-dropdown-showhide-target`. Preferably use similar values as ootb
3. The value property in each child item is used to unhide respective elements
4. Then after the selectbox, start adding the subsequent containers. All containers will be hidden by default. 
5. 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. 
6. 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.