CoralUI 3 show hide based off a checkbox?

Hello @peterjs ,

Here is an example where you will able to add checkbox and give show hide functionality.

To do this you need to add the following steps:

1. Create a clientlib called commons.coral-checkbox-showhide with checkbox-showhide.js
2. In your dialog add this clientlib as an extra dependency
   

   extraClientlibs="[commons.checkbox-showhide]"

    

Example of usages:

<enableOpener
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="Enable Opener"
        name="./enableOpen"
        value="{Boolean}true"
        uncheckedValue="{Boolean}false">
    <granite:data
            jcr:primaryType="nt:unstructured"
            toggle-checkbox_master="true"/>
</enableModalOpener>

<containerWrapper
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
        <customName
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Custom ID"
                emptyText="Custom ID"
                name="./customName"/>
    </items>
    <granite:data
            jcr:primaryType="nt:unstructured"
            toggle-checkbox_slave="true"/>
</containerWrapper>

In the checkbox-showhide.js

(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) {
        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.$);