


How to show/hide tabs based on dropdown selection with new coral ui select option and new tab in dialog . I have gone through lot of documentation which has old foundation select component and tabs have layoutConfig node. Can someone suggest me the latest way of doing it .
Solved! Go to Solution.
Hi @sirishap9577191 ,
Please check if this works for you. I have tried to hide a second tab based on the dropdown selection. In dropdown selection node I have added granite:id - dropdown-selection property, and in tabs node i have added granite:class - dropdown-tab-container
(function ($, document, ns) { $(document).on("dialog-ready", function() { function showHideTab() { var dropdownSelection = $("#dropdown-selection").val(); var coralTab = $(".dropdown-tab-container coral-tablist coral-tab"); if (dropdownSelection === "default") { coralTab.eq(2).hide(); } else { coralTab.eq(2).show(); } } $("#dropdown-selection").on("change", showHideTab); showHideTab(); }); })(Granite.$, document, Granite.author);
See the below article which will walk you thru to implement your requirement in coral3 UI, which is the latest one.
https://www.albinsblog.com/2019/02/how-to-hideshow-tabs-in-coral-3-ui-dialogs-aem.html#.YSjBVNMzbso
Hope this will help.
Umesh Thakur
You can add class in dropdown and based on that trigger JS function to hide/show tabs.
sharing code snippet
/*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);
Hi @sirishap9577191 ,
Please check if this works for you. I have tried to hide a second tab based on the dropdown selection. In dropdown selection node I have added granite:id - dropdown-selection property, and in tabs node i have added granite:class - dropdown-tab-container
(function ($, document, ns) { $(document).on("dialog-ready", function() { function showHideTab() { var dropdownSelection = $("#dropdown-selection").val(); var coralTab = $(".dropdown-tab-container coral-tablist coral-tab"); if (dropdownSelection === "default") { coralTab.eq(2).hide(); } else { coralTab.eq(2).show(); } } $("#dropdown-selection").on("change", showHideTab); showHideTab(); }); })(Granite.$, document, Granite.author);