Expand my Community achievements bar.

SOLVED

Add style attribute based on checkbox selection

Avatar

Level 2

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. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You can go with CSS approach

 

HTL

 

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

 

 

CSS

 

.hide{
display:none;
}

 

 

5 Replies

Avatar

Employee

Hi @Vinod-N-E 

 

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

Screenshot 2023-05-24 at 5.56.21 PM.png

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

This result in below html output:

Screenshot 2023-05-24 at 5.59.12 PM.png

 

Thanks!

Avatar

Level 6

Hi @Vinod-N-E ,

Please change the code as below

 

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

 

Regards,

Shiv

 

 

 

 

Avatar

Correct answer by
Community Advisor

You can go with CSS approach

 

HTL

 

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

 

 

CSS

 

.hide{
display:none;
}

 

 

Avatar

Level 2

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

Avatar

Level 7

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

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