Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Need Tab navigation functionality based on dropdown selection

Avatar

Level 3

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.

 

Nandheswara_0-1666343593428.pngNandheswara_1-1666343616555.png

 

Issue 

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

 

Nandheswara_3-1666343845177.png

 

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);

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 3

This Code is Not working @Hari_Abbott 

View solution in original post

2 Replies

Avatar

Level 1

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

Avatar

Correct answer by
Level 3

This Code is Not working @Hari_Abbott