Add style attribute based on checkbox selection | Community
Skip to main content
V
Vinod-N-E
Level 2
May 24, 2023
Solved

Add style attribute based on checkbox selection

  • May 24, 2023
  • 4 replies
  • 1323 views

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.
Best answer by arunpatidar

You can go with CSS approach

 

HTL

 

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

 

 

CSS

 

.hide{ display:none; }

 

 

4 replies

J
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!

    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

     

     

     

     

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

       

       

      Arun Patidar
        V
        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.

          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' : ''}">
            Terms & ConditionsAccessibility statement

            Loading footer...