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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Show hide tabs based on dropdown selection

sirishap9577191
Level 1
Level 1

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 .

1 Accepted Solution
kishorekumar14
Correct answer by
Level 8
Level 8

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

 

 

View solution in original post

4 Replies
Umesh_Thakur
Community Advisor
Community Advisor

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

Dipti_Chauhan
Community Advisor
Community Advisor

Hi @sirishap9577191 

   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);
kishorekumar14
Correct answer by
Level 8
Level 8

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

 

 

View solution in original post