Show-Hide Dialog Fields in AEM

 Showing and hiding dialog fields is commonly expected use case in AEM. It gives author better options and amazing authoring experience. So let's do it.

1. Create a drop down and add options. Add below property
 granit:class(String) value: cq-dialog-dropdown-showhide

2. Add a node with name granit:data of nt:unstructured type.

3. Add below property
 cq-dialog-dropdown-showhide-target(String) value: .fruittype-showhide-target

4. Create two containers and add  dialog related to apple and orange.

5. Add below class in  container level i.e. in orange and apple node
granit:class(String) value: fruittype-showhide-target 

6. Here each granit:data node will have below properties respectively
showhidetargetvalue(String) value: apple 
showhidetargetvalue(String) value: orage 

7. Dialog will look as below.



8. Verify  and  enjoy.

Hope this helps!!

Happy Coding 🙏

If you like my post and find it helpful, you can buy me a coffee.