Touch UI dialog hide and show tabs on dropdown selection

[randeepr]

We have 3 tabs in a dialog box.

1. general (Always enabled)
2. sports (Enable only when the selection is sports)
3. movies (Enable only when the selection is movies)

Before configuration, 'sports' and 'movies' tabs are hidden. In the 'general' tab we have a select box with options 'choose sports' and 'choose movies'. On selection corresponding tab should display. We tried using the steps provided in the below given path, but it fails to hide the tabs.

Path on libs : /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

Other reference we tried : https://github.com/aman02deep/aem-6.2/blob/master/tabshideshow.js

Steps follow to reproduce the issue.

1. Create 3 tabs on touch UI dialog box
2. Add a drop down selection on first tab
3. Hide and show 2nd and 3rd tab based on the dropdown selection.

Please check the screenshot.

[kautuk_sahni]

Did you try creating an issue in same git link?

Reference post:- Show hide dialog fields based on selection in AEM 6.3  (similar question)

~kautuk

[poojac_2204]

The tabshideshow.js at aem-6.2/tabshideshow.js at master · aman02deep/aem-6.2 · GitHub​ will work , but you need to change name of some classes in your dialog xml , as the class name mention in comment section is different from what have been used in js file.

For example :

class = "cq-dialog-dropdown-tab-showhide" to be replaced by class = "cq-dialog-tab-showhide"

cq-dialog-dropdown-tab-showhide-target = ".list-option-tab-showhide-target" to be replaced by

cq-dialog-tab-showhide-target = ".list-option-tab-showhide-target"

made these changes in your dialog and it should work