Question

A simple page, with the button:

<button id="MyButton">Hello</button>

The problem is:

• I need the button to show if Javascript is disabled
• I need the button to be hidden if Javascript is enabled

A simple Jquery:

$('#MyButton').hide();

Isn’t sufficient as the button ‘flickers’, it loads and then hides itself and it’s very noticeable.

The one way I’ve found to make this work is by using JS to hide it immediately after:

<button id="MyButton">Hello</button>
<script>
    document.getElementById('MyButton').style.visibility = 'hidden';
</script>

This seems a bit ugly and breaking a couple of good standards rules, is this the only way to hide the button without a flickering effect?

Answer 1

<noscript>
    <button id="MyButton">Hello</button>
</noscript>

The HTML NoScript Element () defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

MDN