The show hide function does not work on click of the add button on multifield. | Community
Skip to main content
C
ChinmayiSh
Level 4
September 3, 2024
Solved

The show hide function does not work on click of the add button on multifield.

  • September 3, 2024
  • 3 replies
  • 1543 views

The show hide function does not work for the new set of fields on click on the add button , but works for the existing fields on the dialog.

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 ChinmayiSh

I've implemented a check box to show/hide different fields respectively.

Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

 

var target = $(input).data('cqDialogShowhideTarget');
if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
var value = $(input).val();
if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

$(target).each((_, elem) => {

    var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
    $(elem).toggleClass('hide', isHidden);
    if ($(elem).parent().parent().is('coral-panel')) {
        var tabIndex = $(elem).closest('coral-panel').index();
        $(elem)
            .closest('coral-tabview')
            .find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
            .toggleClass('hide', isHidden);
    }
    if (!$(elem).hasClass('hide')) {
        $(elem).siblings().find('coral-select').removeAttr('required');
        $(elem).siblings().find('coral-select').removeAttr('aria-required');
    }
});

 

 

 

Thanks,

Chinmayi

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 3, 2024

Hi @chinmayish 
If you are looking for dropdown show/hide then you can check

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem6-4-multifield-with-show-hide-dropdown-changing-all-the-items/m-p/237275 

 

Otherwise please share more details.

Arun Patidar
    C
    ChinmayiShAuthor
    Level 4
    September 3, 2024

    Hi @arunpatidar ,

     

    It's not a drop down. It should get hidden on click of the add buttton of the multifield.

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      September 3, 2024

      Hi @chinmayish 
      Could you please add more details

       

      what field should be hidden on 'ADD' button?

      What AEM OOTB feature you are talking about? Or you have custom script to show/hide?
      Sample Component Dialog?

      Screenshot if any

      Arun Patidar
        C
        ChinmayiShAuthorAccepted solution
        Level 4
        September 6, 2024

        I've implemented a check box to show/hide different fields respectively.

        Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

         

        var target = $(input).data('cqDialogShowhideTarget');
        if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
        var value = $(input).val();
        if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

        $(target).each((_, elem) => {

            var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
            $(elem).toggleClass('hide', isHidden);
            if ($(elem).parent().parent().is('coral-panel')) {
                var tabIndex = $(elem).closest('coral-panel').index();
                $(elem)
                    .closest('coral-tabview')
                    .find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
                    .toggleClass('hide', isHidden);
            }
            if (!$(elem).hasClass('hide')) {
                $(elem).siblings().find('coral-select').removeAttr('required');
                $(elem).siblings().find('coral-select').removeAttr('aria-required');
            }
        });

         

         

         

        Thanks,

        Chinmayi

          Terms & ConditionsAccessibility statement

          Loading footer...