Show hide tabs based on dropdown selection

[sirishap9577191]

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 .

[Umesh_Thakur]

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]

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

[Kishore_Kumar_ · Accepted 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);

[Bimmi_Soi]

Hi @sirishap9577191 ,

Please try the below link 

AEM Developer Learning : Show/Hide Tabs and Fields based on Drop Down Selection Using Granite Widget...

Hope this helps.

Thanks

[Anoop4]

I have same requirement by using checkbox to show and hide tabs.

below is my component xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="NDS Container">
<content jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<properties jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<columns jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<behaveAsPaperWrapperContainer
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./behaveAsPaperWrapperContainer"
text="Behave as Paper Wrapper Container"
value="paper">
<granite:data
jcr:primaryType="nt:unstructured"
</behaveAsPaperWrapperContainer>
</items>
</column>
</items>
</columns>
</items>
</properties>
<paper
jcr:primaryType="nt:unstructured"
jcr:title="Paper"
sling:resourceSuperType="/apps/raittcore/components/container/v1/container/paper/cq:dialog/content/items/tabs/items/properties"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="true"/>
</paper>
</items>
</tabs>
</items>
</content>
</jcr:root>