Sly logic not working when adding a div just before and after

[JakeCham]

Hi Team,

Below code is working fine when ${properties.checkbox} = false

<sly data-sly-test="${properties.checkbox}">

   <div>

</sly>

<sly data-sly-test="${properties.checkbox}">

   </div>

</sly>

But the same code is not working after adding another opening and closing div just before and after. code which isn't working is below when ${properties.checkbox} = false

<div>

<sly data-sly-test="${properties.checkbox}"> this sly isn't going inside when it is false as expected

   <div>

</sly>

<sly data-sly-test="${properties.checkbox}"> //this sly is going inside when condition is false

   </div> //closing div, this line is executing when condition is false

</sly>

</div>

output when ${properties.checkbox} = false.

<div>

</div>

</div>

Any suggestion would be appreciated.

Thanks in advance.

[arunpatidar]

Hi @JakeCham 

Browser add closing tab automatically if missing in the HTML.

I think you need to use data-sly-unwrap for adding/removing parent divs.

Can you share the sample output HTML, for both the cases when checkbox is enabled and disabled.

I can share the corresponding HTL for that similar to https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sly-logic-mismatching/m-p/...

[BrianKasingli · Accepted solution]

From experiences, I've noticed that HTML elements cannot be declared as non-pairs inside of sightly conditions, so like you must either use <div></div>.

Please change to ->

<div>

<sly data-sly-test="${properties.checkbox}">

   <div>Test 1</div>

</sly>

<sly data-sly-test="${properties.checkbox}"> 

  <div>Test 2</div>

</sly>

</div>

// output

<div>

<div>Test 1</div>

<div>Test 2</div>
</div>