How to Hide Content If JavaScript is Disabled

If you want to ensure that your website's content is only visible when JavaScript is enabled, then you are on the right page. Today we will learn how to hide content if JavaScript is disabled. With step-by-step instructions, we'll guide you through the process of using JavaScript to hide specific elements on your website, ensuring that users without JavaScript enabled won't be able to access the content. With this method, you can ensure that your website's content is only accessible to users with JavaScript enabled, helping to protect your site's integrity and enhance the user experience.

Hide the Entire Content

To hide the entire content you have to cover the content within an Id tag so that we could hide the entire id when JS is disabled. We are using main-content id here. You can use class also.

<noscript>
<h4>Please enable JavaScript in your web browser!
</h4>
<style type="text/css">
#main-content {display:none;}
</style>
</noscript>

<div id="main-content">
<h4>Welcome to siddharthkamra.in</h4>

<div id="john">Hello, John is here!</div>
</div>

Click to see demo

Hide Content of an Specific Id

We are hiding content of an specific Id named john. You can change it to anything.

<noscript>
<style type="text/css">
#john {display:none;}
</style>
</noscript>

<div id="main-content">
<h4>Welcome to siddharthkamra.in</h4>

<div id="john">This will not appear If JavaScript is disabled.</div>
</div>

Click to see demo

You have successfully learned Hiding content If JavaScript is disabled. If you have any doubt. Leave the comments below. Thank you!