Show/Hide Content with Noscript, CSS & jQuery
The following post tackles an issue I came across on a recent project with form validation. I wanted to provide a javascript:history(-1) link to return a user to the previous page whilst retaining text that was entered into the form fields (unlike simply reloading the original page which looses all the form content). However, simply providing a JavaScript link would leave users who have JavaScript disabled orphaned on the page – certainly quite unprofessional and inaccessible.
The percentage of users who have JavaScript disabled is smaller than those who leave JavaScript enabled, but simply relying on global statistics isn’t (in my opinion) enough reason to ignore a percentage of Internet users (especially if there is a fairly simple fix that pleases both parties). According to W3 Schools statistics, 5% of Internet users have JavaScript disabled. In addition to this statistic, more Internet users are turning to browsers such as Firefox with its many customisation options. There are several security add-ons for Firefox that block JavaScript by default and instead allow users to selectively enable JavaScript on a site-by-site basis.
When validating forms I would always recommend using a JavaScript solution that runs client-side to give the user instant feedback (preferably without needing a page reload), along with a server-side validator to deal with users who have JavaScript disabled and to tackle spammers. But this is beyond the scope of this post, and will be dealt with in future posts.
The following code examples show how it’s possible to show a certain portion of content for users with JavaScript enabled whilst hiding another portion designed for those with JavaScript disabled – and vice-versa.
The HTML
The example HTML code below shows two paragraphs of text. One uses a JavaScript link whereas the other uses a normal hyperlink. We can toggle the visibility of the two paragraphs by using a combination of the tag, CSS and jQuery.
<!--Display paragraph if JavaScript is enabled in the browser.--> <p id="hasjs"><a href="javascript:javascript:history.go(-1)">Go back to previous page.</a></p> <!--Display paragraph if JavaScript is disabled in the browser.--> <noscript><p id="nojs"><a href="http://www.examplesite.com/contact/">Go back to previous page.</a></p></noscript>
The CSS
Within the CSS you need to set the #hasjs paragraph to display:none. We will then use jQuery to override the CSS if JavaScript is enabled.
<style type="text/css">
#hasjs {
display:none
}
</style>
The jQuery
The following piece of JavaScript tells the browser to hide the #nojs paragraph and show the #js paragraph. This obviously only applies if JavaScript is enabled in the browser.
<script type="text/javascript">
$(document).ready(function(){
$('#nojs').hide();
$('#hasjs').show();
});
</script>
Put it all together
For the purpose of this demonstration we will include the JavaScript and CSS in the head of the HTML page, but these can both be called from external files.
Please note that you will also need to call the jQuery library either directly from Google Code, or by downloading the latest build and referring to its location on your own server. For caching purposes I call jQuery directly from Google Code so this is how it is shown in the example below.
<html>
<head>
<title>Show/Hide Example</title>
<style type="text/css">
#hasjs {
display:none
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nojs').hide();
$('#hasjs').show();
});
</script>
</head>
<body>
<!--Display paragraph if JavaScript is enabled in the browser.-->
<p id="hasjs"><a href="javascript:javascript:history.go(-1)">Go back to previous page.</a></p>
<!--Display paragraph if JavaScript is disabled in the browser.-->
<noscript><p id="nojs"><a href="http://www.site-domain-name-here.com/contact/">Go back to previous page.</a></p></noscript>
</body>
</html
Great post Rob!
Why do we need to include the tags as it still works without. Is that for certain browsers?
S.
Sorry for repeat post but it stripped out my tag example.
Why do we need to include the \’noscript\’ tag as it still works without. Is that for certain browsers?
S.
Hi Steve
Including ‘noscript’ will mean the information contained within the ‘noscript’ tag is ignored when JS is enabled in the browser. If it was rendered, you would end up with two sets of information (the JS version and the non-JS version showing up on the page at the same time).
If you drop me the URL I’ll have a look for you though.
Thanks
Why do you hide the content of the noscript tag in your script, surely it’s invisible anyway? I’m surprised you can see the contents from js actually.
Good point Paul, it’s not necessary to hide the #nojs paragraph as the noscript tag should handle it. I did it for completeness to continue to hide the noscript paragraph if noscript is incorrectly handled in some browsers… but probably not necessary.
Thanks for stopping by.