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

AEM 6.4 – Toggle dialog fields based on Checkbox selection

karanmahi
Level 4
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
Prince_Shivhare
Community Advisor
Community Advisor

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

karanmahi
Level 4
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.$);