<enable | |
jcr:primaryType="nt:unstructured" | |
sling:resourceType="granite/ui/components/foundation/form/checkbox" | |
text="Enable" | |
id="enable" | |
value="true" | |
name="./enable" | |
class="cq-dialog-checkbox-showhide" | |
cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/> | |
<deleteEnable | |
jcr:primaryType="nt:unstructured" | |
sling:resourceType="granite/ui/components/foundation/form/hidden" | |
name="./enable@Delete" | |
value="true"/> | |
<showHideContainer | |
jcr:primaryType="nt:unstructured" | |
sling:resourceType="granite/ui/components/foundation/container" | |
class="hidden button-option-enable-showhide-target" | |
showhidetargetvalue="true"> | |
<items jcr:primaryType="nt:unstructured"> | |
<!-- some components to show/hide --> | |
</items> | |
</showHideContainer> |
/** | |
* Extension to the standard checkbox component. It enables showing/hiding of other components based on the | |
* selection made in the checkbox. | |
* | |
* How to use: | |
* | |
* - add the class cq-dialog-checkbox-showhide to the checkbox element | |
* - add the data attribute cq-dialog-checkbox-showhide-target to the checkbox element, value should be the | |
* selector, usually a specific class name, to find all possible target elements that can be shown/hidden. | |
* - add the target class to each target component that can be shown/hidden | |
* - add the class hidden to each target component to make them initially hidden | |
* - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select | |
* option that will unhide this element. Leave this value as an empty string to toggle the target component on | |
* when the checkbox is unchecked. | |
*/ | |
(function(document, $) { | |
"use strict"; | |
// when dialog gets injected | |
$(document).on("foundation-contentloaded", function(e) { | |
// if there is already an inital value make sure the according target element becomes visible | |
$(".cq-dialog-checkbox-showhide").each( function() { | |
showHide($(this)); | |
}); | |
}); | |
$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) { | |
showHide($(this)); | |
}); | |
function showHide(el){ | |
// get the selector to find the target elements. its stored as data-.. attribute | |
var target = el.data("cqDialogCheckboxShowhideTarget"); | |
// is checkbox checked? | |
var checked = el.prop('checked'); | |
// get the selected value | |
// if checkbox is not checked, we set the value to empty string | |
var value = checked ? el.val() : ''; | |
// make sure all unselected target elements are hidden. | |
$(target).not(".hide").addClass("hide"); | |
// unhide the target element that contains the selected value as data-showhidetargetvalue attribute | |
$(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide"); | |
} | |
})(document,Granite.$); |
This comment has been minimized.
This comment has been minimized.
You can add it to a clientlibs with the |
This comment has been minimized.
This comment has been minimized.
Can we do the same for tabs as well.? I mean sling:resourceType="granite/ui/components/foundation/section". I tried but not working, can you help me on this.? |
This comment has been minimized.
This comment has been minimized.
It Will not work untill we change the class from "hide" to "hidden" in js .or from "hidden" to "hide" in dialog.. |
This comment has been minimized.
This comment has been minimized.
I tried the above but its not working for me plz let me know do i need to change anywhere in js file |
This comment has been minimized.
This comment has been minimized.
Thanks... There is one more class we need to remove >> // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
$(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide").removeClass('hidden'); Good Luck... |
This comment has been minimized.
This comment has been minimized.
Can we use the same for tabs? as when i tried the same logic to show-hide tabs based on checkbox selection, it doesn't work. |
This comment has been minimized.
This is exactly what I have been looking for. Glad I did another google search as I didn't find anything couple months ago.
I have one question, where would one place the .js file?