Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Custom js or show hide in multifield

Avatar

Level 7

I have one component 

Ronnie09_0-1653983908033.png

Ronnie09_1-1653984062368.png



In this whenever enable image variation is selected then in Multifield I want Image and caption should be appearing else no image and caption should be there, 

I cant achieve this.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Ronnie09 

If you want to show and hide fields on the basis of drop-down you can write custom JS to achieve the same
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);
        }
    }

References:
1. http://www.sgaemsolutions.com/2019/01/showhide-tabs-and-fields-based-on-drop.html 
2. https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/?...
3. https://aem4beginner.blogspot.com/showhide-tabs-and-fields-based-on-drop

Hope that helps!

Regards,
Santosh

View solution in original post

2 Replies

Avatar

Community Advisor

Kindly check the below link.

link 

 

 

 

Himanshu Jain

Avatar

Correct answer by
Community Advisor

Hi @Ronnie09 

If you want to show and hide fields on the basis of drop-down you can write custom JS to achieve the same
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);
        }
    }

References:
1. http://www.sgaemsolutions.com/2019/01/showhide-tabs-and-fields-based-on-drop.html 
2. https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman/?...
3. https://aem4beginner.blogspot.com/showhide-tabs-and-fields-based-on-drop

Hope that helps!

Regards,
Santosh