Skip to content

Instantly share code, notes, and snippets.

Last active January 7, 2022 06:07
What would you like to do?
AEM 6 Touch UI Show/Hide Checkbox Component Extension - Extension to the standard checkbox component. It enables hiding/unhiding of other components based on the selection made in the checkbox.
class="hidden button-option-enable-showhide-target"
<items jcr:primaryType="nt:unstructured">
<!-- some components to show/hide -->
* 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() {
$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
function showHide(el){
// get the selector to find the target elements. its stored as data-.. attribute
var target ="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.
// unhide the target element that contains the selected value as data-showhidetargetvalue attribute
$(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
Copy link

shruti93sinha commented Dec 19, 2019

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.?

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.
Can you give a solution for the same.

Copy link

While editing the component, even with checkbox selected, I cannot see the textfield. What can I do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment