Skip to main content
Vinod-N-E
Level 2
May 24, 2023
Solved

Add style attribute based on checkbox selection

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. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
Community Advisor
May 24, 2023

You can go with CSS approach

 

HTL

 

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

 

 

CSS

 

.hide{ display:none; }

 

 

Arun Patidar
View in thread

5 replies

Adobe Employee
jalajaAdobe Employee
Adobe Employee
May 24, 2023

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!

Translate
    Shiv_Prakash_Patel
    Community Advisor
    Shiv_Prakash_PatelCommunity Advisor
    Community Advisor
    May 24, 2023

    Hi @vinod-n-e ,

    Please change the code as below

     

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

     

    Regards,

    Shiv

     

     

     

     

    Translate
    Shiv Prakash
      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      May 24, 2023

      You can go with CSS approach

       

      HTL

       

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

       

       

      CSS

       

      .hide{ display:none; }

       

       

      Translate
      Arun Patidar
        Vinod-N-EAuthor
        Level 2
        May 25, 2023

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

        Translate
          DPrakashRaj
          Community Advisor
          DPrakashRajCommunity Advisor
          Community Advisor
          May 25, 2023

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

          div class="exampleclass ${true ? 'testclass' : ''}">
          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...