Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Show hide with drop down

Avatar

Level 7

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

1 Accepted Solution

Avatar

Correct answer by
Level 4

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

 

View solution in original post

3 Replies

Avatar

Level 7

@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

Avatar

Correct answer by
Level 4

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