Show hide with drop down

[Ronnie09]

I have one drop down having values

default, Red, Green

if author select default then one text field and one checkbox should appear below the drop down

if author chose red/ green one new dropdown with (Dark, Light, Seap) should appear.

How can it be achieved? I am confused

[Ronnie09]

@Leela-Pavan-Kumar Can you help 

(function($, $document) {

    "use strict";

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

        $("#tabtest").each(function() {

            showHide();

        });

    });


    $document.on("change", ".textType", function(e) {

        showHide();

    });


    function showHide() {
        var list = $("#tabtest").find("coral-tab");
        let contained = $(".contained").prop("selected");
        let defaultt = $(".default").prop("selected")

        if (contained) {
            list[1].removeAttribute("hidden");
        } else {
            list[1].setAttribute("hidden", true)

        }
        if (defaultt) {
            list[2].removeAttribute("hidden");

        } else {
            list[2].setAttribute("hidden", true);
        }
    }
})($, $(document));

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/create-one-show-hide-for-t...

This new thing I have to place inside contianed and default tab

[Leela-Pavan-Kumar · Accepted solution]

Hi @Ronnie09 ,

Try this,

    function showHide() {
        let defaultt = $(".default").prop("selected");
        let red = $(".red").prop("selected");
        let green = $(".green").prop("selected");

        if (defaultt) {
            $(".text").removeAttribute("hidden");
            $(".checkbox").removeAttribute("hidden");

        } else {
            $(".text").setAttribute("hidden", true);
            $(".checkbox").setAttribute("hidden", true);

        }
        if (red || green) {
            $(".newdropdown").removeAttribute("hidden");

        } else {
            $(".newdropdown").setAttribute("hidden", true);
        }
    }

[arunpatidar]

Hi,

You can check below article to explore varous option for show hide

https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/