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.
Solved! Go to Solution.
Views
Replies
Total Likes
You can go with CSS approach
HTL
<div class="test${logic.checkBox ? ' hide' : ''}"> Test </div>
CSS
.hide{
display:none;
}
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!
Hi @Vinod-N-E ,
Please change the code as below
<div class="test" style="${model.checkBox =='true' ? 'display:none' : ''}">
Regards,
Shiv
You can go with CSS approach
HTL
<div class="test${logic.checkBox ? ' hide' : ''}"> Test </div>
CSS
.hide{
display:none;
}
Thank You everyone, all answers worked out but it was good to avoid inline css. So Thank you Arun again for helping out.
You can add css class based on condition and with respective cad you can hide and show
div class="exampleclass ${true ? 'testclass' : ''}">
Views
Likes
Replies