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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
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
2 Replies

Avatar

Community Advisor

Kindly check the below link.

link 

 

 

 

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