Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Add style attribute based on checkbox selection

Avatar

Level 3

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;
}

 

 



Arun Patidar

View solution in original post

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

Community Advisor

Hi @Vinod-N-E ,

Please change the code as below

 

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

 

Regards,

Shiv

 

 

 

 

Shiv Prakash

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;
}

 

 



Arun Patidar

Avatar

Level 3

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

Avatar

Community Advisor

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

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