Hello @nikogr
Here I am giving the idea of how you can achieve it with a dropdown selector.
Your requirement is not supported by AEM OTB. So you need to create a clientlib and do some custom code for this. To achieve this you need to write a clientlib for the author dialog.
Step 1: Add your clientlib by "extraClientlibs" in your dialog.
Step 2: You can choose the "select" component which supports multiple values to select with "granite:data" => 'cq-dialog-dropdown-showhide-target=".target-item-show-hide"'
<type
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
granite:class="cq-dialog-dropdown-showhide"
fieldLabel="Type"
multiple="{Boolean}true"
name="./type">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".target-item-show-hide"/>
<items jcr:primaryType="nt:unstructured">
<option
jcr:primaryType="nt:unstructured"
text="Targeted Item"
value="targetedItem"/>
</items>
</type>
Step 3: Add "granite:data" => 'showhidetargetvalue="targetedItem"' in the targeted component and 'granite:class="hide target-item-show-hide"'
<targetedItem
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
granite:class="hide target-item-show-hide">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="targetedItem"/>
Step 3: You can grab the selected items from this "select" component in the associated clientlib js as an array/list
let selectedItemList = $('.cq-dialog-dropdown-showhide').values;
Step 4: You can also grab all targeted item
let targetedItemClass = $(element).data("cqDialogDropdownShowhideTarget"); // targetedItem class which is provided in "granite:data" in select component
let targetedItemList = $(targetedItemClass);
Step 5: Then you can loop through the targeted item list and check if any item's "showhidetargetvalue" exist on the selected item list and filter out these items
var filteredItem = [];
targetedItemList.each((idx, targetedItem) => {
let targetedItemValue = $(targetedItem).data('showhidetargetvalue');
if(selectedItemList.includes(targetedItemValue)){
filteredElement.push($(targetedItem));
}
})
Step 6: Now you can show/hide those filtered items.
filteredElement.forEach(element => element.removeClass('hide'));
