Hi @Sandeep_k_Singh ,
To show tabs based on dropdown option selection in an AEM dialog, you can modify the existing JavaScript code to add logic that shows and hides the tabs based on the selected option.
Here's an example of how you can modify the existing code to show and hide tabs based on the selected option:
1. Add a data attribute to the tabs: Add a data attribute to each tab that specifies the value of the dropdown option that should be selected to show the tab. For example, you can add a `data-showhidetabvalue` attribute to each tab with the value of the corresponding dropdown option.
2. Modify the `showHideHandler` function: Modify the `showHideHandler` function to show and hide the tabs based on the selected option. You can use the `value` variable to get the selected option value and the `data-showhidetabvalue` attribute to match the value with the corresponding tab.
Here's the modified JavaScript code:
```
(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
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});
$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});
function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
});
// show/hide tabs based on selected option
var value = el.val();
var tabs = $(".coral-TabPanel-tab");
tabs.each(function(i, tab) {
var tabValue = $(tab).data("showhidetabvalue");
if (tabValue === value) {
$(tab).show();
} else {
$(tab).hide();
}
});
}
function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
var elementIndex = $(element).closest('coral-multifield-item').index();
if (target) {
var value;
if (component.value) {
value = component.value;
}
$target.each(function(index) {
var tarIndex = $(this).closest('coral-multifield-item').index();
if (elementIndex == tarIndex) {
$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide"); }
});
}
}
})(document, Granite.$);
```
Note that this is just an example and you may need to modify the code to fit your specific use case. It's also recommended to consult with experienced AEM developers or solution architects to ensure that the code is implemented correctly and follows best practices.
