Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM 6.4 – Toggle dialog fields based on Checkbox selection

Avatar

Level 4

In AEM 6.3 (coral-2), we had the custom javascript code [clientlib] which use to work to toggle dialog fields based on the checkbox click. Now, we have upgraded to 6.4.3 and converted all dialogs to coral-3 And functionality stopped working now. I have got the reference of OOTB "List component" but that is for dropdown based toggle, I need checkbox based toggle. Any reference will be helpful.

2 Replies

Avatar

Community Advisor

could you please tell what sling:resourceType you are using for checkbox?

Avatar

Level 4

granite/ui/components/coral/foundation/form/checkbox

Just for your reference, I was using below client lib for toggle

(function (document, $) {

  "use strict";

  // listen for dialog injection

  $(document).on("foundation-contentloaded", function (e) {

    $(".showhide").each(function () {

      showHide($(this));

    });

  });

  // listen for toggle change

  $(document).on("change", ".showhide", function (e) {

    showHide($(this));

  });

  // show/hide our target depending on toggle state

  function showHide(el) {

    var target = el.data("showhideTarget"),

      value = el.prop("checked") ? el.val() : "";

    // hide all targets by default

    $(target).not(".hide").addClass("hide");

    // show any targets with a matching target value

    $(target).filter("[data-showhide-target-value=\"" + value + "\"]").removeClass("hide");

  }

})(document, Granite.$);