Show/Hide Checkbox is not working

The above xml code is for show hide checkbox in aem 6.5. So if i check this checkbox below container will open and show the fields of First and Last Name. And it is used to work without any extra clientlibs added.

Now I reacently changed the system and did AEM Project setup on new system and in that it's not working. And wherever I have used this class="cq-dialog-checkbox-showhide" across the code base it's not working.

But if I build the same code on my teammates system it's working. Its not working on my system. If I even deploy this code to ci-environment there also its working fine. Not working on any system where i did new project setup.

And I'm completely clueless what is the reason why it's not working.

<enableCollasableText
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/checkbox"
        class="cq-dialog-checkbox-showhide"
        cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target-three"
        name="./show"
        text="Show Below Conatiner"
        uncheckedValue="false"
        value="true"/>
<collasableTextContainer
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="hidden button-option-enable-showhide-target-three"
        showhidetargetvalue="true">
    <items jcr:primaryType="nt:unstructured">
        <showFirstName
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="First Name"
                name="./firstName"/>
        <showLastName
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Last Name"
                name="./lastName"/>
    
    </items>
</collasableTextContainer>

Hi @sanketja1,

My suspect is, your checkbox-based show/hide (cq-dialog-checkbox-showhide) might NOT firing because your local author instance is missing the legacy Granite UI showhide JS, usually due to:

• missing/disabled clientlibs
• corrupted browser cache
• missing AEM Oak indexes after new setup
• incorrect /libs content after unpack
• a mismatch between project clientlibs and your AEM patch level

If this clientlib is not loading, nothing works.

You mentioned: recently changed the system and setup the project again

If your local AEM version = 6.5 GA
But teammate = 6.5.15 / 6.5.17 / 6.5.19

-> showhide.js changes across service packs.

Check AEM version

Go to:

http://localhost:4502/system/console/productinfo

Compare:

• AEM version

• Service Pack version

If yours is older -> update

Hi @sanketja1 ,

Your show/hide checkbox is not working on your new system because the Granite UI “showhide” script that powers cq-dialog-checkbox-showhide is not being loaded correctly on your local AEM instance, even though the same code works on your teammate’s machine and in the CI environment. Since your AEM version and Service Pack level match, the issue is not with the code but with the local environment. When AEM is installed on a fresh system, the /libs folder or its clientlibs can sometimes get corrupted or incomplete, which causes core Granite UI files (such as foundation.js, granite.js, or coral.js) to fail to load. If these core clientlibs do not load, the show/hide behavior stops working everywhere in dialogs. In this situation, your XML component code is correct—it only fails because your local AEM does not have the required UI scripts available.

What typically happens is that your browser loads the dialog, but the essential Granite clientlibs are either missing, blocked by a conflicting clientlib in /apps, or stuck in cache. Because other machines load the same code correctly, your instance is the only one with a broken /libs or broken clientlib resolution. The clean and correct way to fix this is to reinstall your local AEM instance from scratch: delete the entire crx-quickstart folder, start AEM again so it rebuilds a clean /libs, clear the browser cache, and then deploy your project. As soon as the original Granite UI clientlibs load again, the show/hide checkbox will start working normally, just like it does on the other systems.

Thanks,

Vishal

Hello @sanketja1 

Quick things to check :
1. Browser console and network

Open dialog → Browser DevTools → Console:

Look for JS errors, especially from /libs/cq/gui/components/authoring/... or /libs/granite/ui/components/....

Network → filter clientlibs:

Check for 404/500 on /libs/.../clientlibs/... files.

2. Custom clientlibs in /apps

Check /apps/<project>/clientlibs:

Look for clientlibs with categories like cq.authoring.* or anything that might affect dialogs.

>>> Temporarily disable them (rename folder or exclude from build) and test:

If show/hide starts working, that clientlib is conflicting (wrong jQuery, broken JS, etc.).

3. Overlays of /libs dialog components

Look for overlays like:

/apps/cq/gui/components/authoring/dialog

/apps/granite/ui/components/...

4. Dialog is really Touch UI + node consistency

Ensure component has cq:dialog (Touch UI)
Compare the dialog nodes in CRXDE between your instance and teammate’s to ensure no extra/missing properties or typo in class/target.

5. Browser cache / extensions

Test in incognito/private window and in another browser.

Disable extensions (ad blockers, script blockers).

If it works only in incognito/other browser, clear cache or reset extensions.

Workaround that may help :

If the built‑in cq-dialog-checkbox-showhide script is not firing, add a tiny custom show/hide script:

Create an author clientlib, e.g. /apps/<project>/clientlibs/dialog-showhide:

jcr:primaryType = cq:ClientLibraryFolder

categories = [cq.authoring.dialog] (or a category you include from your dialog)

js.txt:

showhide.js

showhide.js content:

>> Make sure your cq:dialog includes this clientlib (via extraClientlibs or a shared authoring category).