Add style attribute based on checkbox selection

[Vinod-N-E]

Hi Community,

I need to add a style attribute to an element in a HTL file, if a checkbox is checked and I tried the below example.

<div class="test" style="${model.checkBox ? 'display:none' : ''}"> 

</div>

I also tried ,

data-sly-attribute.style=""

I guess which is not allowed.

Is there any suggestions, please do help here. Thanks. 

[jalaja]

Hi @Vinod-N-E 

You may try writing your sightly as 
<div class="test ${properties.isreadonly @context='unsafe'}">Test</div>

Please take care of double quotes and define uncheckedValue accordingly (if using dialog value).

This result in below html output:

Thanks!

[Shiv_Prakash_Patel]

Hi @Vinod-N-E ,

Please change the code as below

<div class="test" style="${model.checkBox =='true' ? 'display:none' : ''}">

Regards,

Shiv

[arunpatidar · Accepted solution]

You can go with CSS approach

HTL

 <div class="test${logic.checkBox ? ' hide' : ''}"> Test </div>

CSS

.hide{
display:none;
}

[Vinod-N-E]

Thank You everyone, all answers worked out but it was good to avoid inline css. So Thank you Arun again for helping out.

[DPrakashRaj]

You can add css class based on condition and with respective cad you can hide and show

div class="exampleclass ${true ? 'testclass' : ''}">