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

SOLVED

Custom js or show hide in multifield

Avatar

Level 6

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

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