Need Tab navigation functionality based on dropdown selection

[Nandheswara]

Hi all,

I'm using AEM 6.4, in my component having 3 tabs "Document Source" and "Title" tabs are static another one tab(Filter tab and Document List) Should show based on the dropdown selection in Document Source tab. For Showing the tab based on dropdown selection i used some JS to display based on the selection values.

Issue 

I want the functionality, once the tab is selected i want to go that selected tab like below screenshot.

Give me some suggestion to achieve that tab navigation functionality based on dropdown selection.

This is the JS used in my component

/*globals Granite,Coral*/
(function ($, document) {
'use strict';
//used in the dialogs
$(document).on('dialog-ready', function () {
init()
});
var visibaleTabIds = [];
function toggleTabs(allDepPanelIds, negate) {
return function (tab) {
var panelStack = tab.parentElement.parentElement;
var tabId = panelStack.id;
visibaleTabIds.push(tabId);
var tabsList = document.querySelector('coral-dialog-content coral-tablist');
tabsList.items.getAll().forEach(function (tabItem) {
var ariaControls = tabItem.getAttribute('aria-controls');
if (allDepPanelIds.indexOf(ariaControls) !== -1) {
if (negate) {
tabItem.hidden = !ariaControls !== tabId;
} else {
if (ariaControls !== tabId) {
tabItem.hidden = !visibaleTabIds.includes(ariaControls)
} else {
tabItem.hidden = false;
}
}
}
});
};
}
function showHideTabListItems(initial) {
var allDependentTabsNodeList = document.querySelectorAll('[data-dep-value]');
var allDependentTabs = [].slice.call(allDependentTabsNodeList);
var allDepPanelIds = allDependentTabs.map(function (tab) {
var panelStack = tab.parentElement.parentElement;
return panelStack.id;
});
var tabsToShow = allDependentTabs.filter(function (el) {
var array = el.dataset.depValue.split(',');
if (array.length) {
return array.includes(initial);
} else {
return el.dataset.depValue === initial;
}
});
if (tabsToShow.length) {
tabsToShow.forEach(toggleTabs(allDepPanelIds, false));
} else {
allDependentTabs.forEach(toggleTabs(allDepPanelIds, true))
}
visibaleTabIds = [];
}
function setUpShowHide(selector) {
Coral.commons.ready(selector, function () {
selector.on('change', function (e) {
showHideTabListItems(e.target.value);
});
var initial = selector.value;
showHideTabListItems(initial);
})
}
function init() {
Coral.commons.ready(document, function () {
var selectors = document.querySelectorAll('.tabs_show-hide');
if (selectors.length !== 0) {
selectors.forEach(setUpShowHide)
}
})
}
}
)(Granite.$, document);

[Hari_Abbott]

Hi@Nandheswara  
Use this JS 

(function (document, $) {

    "use strict";

    $(document).on("foundation-contentloaded", function (e) {

        showHideHandler($(".cq-dialog-dropdown-showhide", e.target));

    });

    $(document).on("selected", ".cq-dialog-dropdown-showhide", function (e) {

        showHideHandler($(this));

    });

    function showHideHandler(el) {

        el.each(function (i, element) {

            if ($(element).is("coral-select")) {

                Coral.commons.ready(element, function (component) {

                    showHide(component, element);

                    component.on("change", function () {

                        showHide(component, element);

                    });

                });

            }

        })

    }

    function showHide(component, element) {

        var target = $(element).data("cqDialogDropdownShowhideTarget");

        var $target = $(target);

        if (target) {

            var value;

            if (component.value) {

                value = component.value;

            } else {

                value = component.getValue();

            }

            $target.not(".hide").addClass("hide");

            $target.filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");

        }

    }

})(document, Granite.$);


Regards
Hari Prasath

[Nandheswara · Accepted solution]

This Code is Not working @Hari_Abbott