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

Add style attribute based on checkbox selection

  • May 24, 2023
  • 4 replies
  • 1322 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

DPrakashRaj
DPrakashRaj
New Participant
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' : ''}">
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    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
      New Participant
      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.

        Shiv_Prakash_Patel
        Shiv_Prakash_Patel
        New Participant
        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
          J
          jalaja
          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!

            Terms & ConditionsAccessibility statement

            Loading footer...