Custom js or show hide in multifield | Community
Skip to main content
R
Ronnie09
Level 6
May 31, 2022
Solved

Custom js or show hide in multifield

  • May 31, 2022
  • 2 replies
  • 676 views

I have one component 



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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SantoshSai

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/?articleId=6674275119294230528
3. https://aem4beginner.blogspot.com/showhide-tabs-and-fields-based-on-drop

Hope that helps!

Regards,
Santosh

2 replies

Himanshu_Jain
Community Advisor
Himanshu_JainCommunity Advisor
Community Advisor
May 31, 2022

Kindly check the below link.

link 

 

 

 

Himanshu Jain
    SantoshSai
    Community Advisor
    SantoshSaiCommunity AdvisorAccepted solution
    Community Advisor
    May 31, 2022

    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/?articleId=6674275119294230528
    3. https://aem4beginner.blogspot.com/showhide-tabs-and-fields-based-on-drop

    Hope that helps!

    Regards,
    Santosh
    Santosh Sai
      Terms & ConditionsAccessibility statement

      Loading footer...