CoralUI master slave show-hide & vice-versa

[rosudel]

I've added two checkboxes in my component as below:

<checkboxone
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="check box one"
        name="./check1"
        value="{Boolean}true"
        uncheckedValue="{Boolean}false">
    <granite:data
            jcr:primaryType="nt:unstructured"
            toggle-checkbox_master="true"/>
</checkboxone>
<checkboxtwo
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="check box two"
        name="./check2"
        value="{Boolean}true"
        uncheckedValue="{Boolean}false">
    <granite:data
        jcr:primaryType="nt:unstructured"
        toggle-checkbox_slave="false"/>
</checkboxtwo>

For implementing show-hide functionality between master-slave I've added below js to my clientlibs & import it by "extraClientlibs" in xml.

(function (document, $) {
    "use strict";

    var TOGGLE_ATTRIBUTE_PREFIX = "data-toggle-";
    var MASTER_ATTRIBUTE_SUFFIX = "_master";
    var SLAVE_ATTRIBUTE_SUFFIX = "_slave";
    var DIALOG_CONTENT_SELECTOR = ".cq-dialog-content";


    /**
     * Build the master and slave attribute names from the toggle name.
     * @Param {string} toggleName
     */
    function getAttributes(toggleName) {
        debugger;
        return {
            master: TOGGLE_ATTRIBUTE_PREFIX + toggleName + MASTER_ATTRIBUTE_SUFFIX,
            slave: TOGGLE_ATTRIBUTE_PREFIX + toggleName + SLAVE_ATTRIBUTE_SUFFIX
        }
    }

    /**
     * Builds the master and slave selectors from the toggle name.
     * @Param {string} toggleName
     */
    function getSelectors(toggleName) {
        var attributes = getAttributes(toggleName);
        return {
            master: "[" + attributes.master + "]",
            slave: "[" + attributes.slave + "]"
        }
    }

    var toggle = {
        name: "checkbox",
        updateFunction: function (master, $slaves) {
            var isChecked = master[0].hasAttribute("checked");
            $slaves.each(function () {
                if (isChecked.toString() !== $(this).attr(getAttributes("checkbox").slave)) {
                    $(this).addClass("hide");
                } else {
                    $(this).removeClass("hide");
                }
            })
        }
    };

    var selectors = getSelectors(toggle.name);

    // When the dialog is loaded, init all slaves
    $(document).on("foundation-contentloaded", function (e) {

        // Find the dialog
        var $dialog = $(e.target);
        if ($dialog && $dialog.length === 1) {

            // Find the toggel master
            var $master = $dialog.find(selectors.master);
            if ($master) {
                if ($master.length !== 1) {
                    console.error($master.length + " masters for toggle <" + toggle + ">");
                    return;
                }

                // Update slaves
                var $slaves = $dialog.find(selectors.slave);
                toggle.updateFunction($master, $slaves);
            }
        }
    });

    // When a value is changed, trigger update
    $(document).on("change", function (e) {

        // Find the master which was updated
        var $master = $(e.target);
        var $dialog = $master.parents(DIALOG_CONTENT_SELECTOR);
        if ($master && $master.length === 1 && $master.is(selectors.master)) {

            // Update slaves
            var $slaves = $dialog.find(selectors.slave);
            toggle.updateFunction($master, $slaves);
        }
    });

})(document, Granite.$);

Its working fine while I check "check box one" & it makes "check box two" disappeared. But while I check "check box two" , "check box one" never disappeared. Can I apply this functionality(Checking "check box two" will disappear "check box one" & vice versa) here? Or need to write custom js ? Thanks.

[aanchal-sikka · Accepted solution]

Hello @rosudel 

Please refer to the following link, it also points to a repo, where have been able to show-hide fields based on chexkbox

https://www.youtube.com/watch?v=gcNa0uqxytg&ab_channel=AEMandDevopsTutorial

[kautuk_sahni]

@rosudel Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.