AEM - Touch UI dialog hide and show tabs on dropdown selection

Question

I am trying to create a tab based touch-ui dialog AEM (AEM-6.2) But I am facing issues to hide the tabs.

I 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 I have a select box with options 'choose sports' and 'choose movies'. On selection corresponding tab should display. I tried using the steps provided in the below given path, but it fails to hide the tabs.

Path : /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

Content.xml file:

                                </items>
                            </selection>
                        </items>
                    </columns>
                </items>

        </generalPanel>
         <sports
            jcr:primaryType="nt:unstructured"
            jcr:title="Sports"
            sling:resourceType="granite/ui/components/foundation/container">
             <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                             <sptext jcr:primaryType="nt:unstructured"
                                  sling:resourceType="granite/ui/components/foundation/form/textarea"
                                  fieldLabel="enter the text :"
                                  name="./sp_text"
                                  required="false"/>

                        </items>
                    </columns>

                </items>

        </sports>
        <movies
            jcr:primaryType="nt:unstructured"
            jcr:title="Movies"
            sling:resourceType="granite/ui/components/foundation/container">
             <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                             <mvtext jcr:primaryType="nt:unstructured"
                                  sling:resourceType="granite/ui/components/foundation/form/textarea"
                                  fieldLabel="enter the text :"
                                  name="./mv_text"
                                  required="false"/>

                        </items>
                    </columns>

                </items>
        </movies>
    </items>
</content>

Answer 1

You can use granite:data to create a data-attribute which you can hide and show at you convinicence using jquery.

1. Add Listener to change of your radio button
2. Add granite:data to both tabs
3. On listener being called, Hide and show, based on your selection and jquery.

Ref: https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/commonattrs.html