aemsightly

Show Hide HTML Attribute in AEM

Let's pretend I have a boolean paratemeter called isDisabled. If isDisabled is true, we want to add a custom html attribute called data-enable-hide; otherwise, we will not show the html attribute.

The option I could think of is:

<div data-sly-test="${model.isDisabled}">
    <div class="container" data-enable-hide>
          Hello World
    </div>
</div>
<div data-sly-test="${!model.isDisabled}">
    <div class="container">
          Hello World
    </div>
</div>

This option would work but it would duplicate the inner HTML because the only difference is to show and hide the HTML attribute. Is there any specific syntax from AEM that would allow me to show/hide HTML attribute based on boolean condition?

Solution

  • You can make use of test conditions directly within the attribute as shown below

    <div class="container" data-enable-hide="${isDisabled || ''}">
      Hello World
</div>

    This would output <div class="container" data-enable-hide="true"> if isDisabled is true or it will remove the whole attribute if it is false i.e., the output would be <div class="container"> when false