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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Show hide with drop down

Ronnie09
Level 4
Level 4

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

3 Replies
Ronnie09
Level 4
Level 4

@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
Level 2
Level 2

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