Search code examples
javascriptcssnoscript

Styles to Hide Content when JS is Disabled

I have a site that has a buttons visible typically. If javascript is disabled then I want to hide that button from the user. I tried using the following code: 

<noscript>
 <style>
   .cart-opt{display:none;}
 </style>
  <br>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE SHOULD BE SHOWN WITH JS ENABLED--> </div>

This didn't work. Even though the <style> tag was wrapped in <noscript> tag it was still read and hid the buttons even when JS enabled.

How do I write the styles so the <style> tag isn't read unless JS is disabled?

Note: I am using HTML 5.

Solution

  • Wouldn't this be an alternative solution?

    <noscript>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
 <div style="display:none">
</noscript>

<div class="cart-opt opt-btns"> <!-- BUTTONS HERE --> </div>

<noscript>
  </div>
</noscript>