Question

So I have 2 links that I would like to show if javascript is on and hide when it is off, and when the javascript is off, I would like to show 2 other links in its place with noscript tag.

What I have so far is:

-js here-
show 2 links if js is on and hide when it is disabled
-js here-

-noscript-
link 1
link 2
-noscript-

I only have experience in PHP and am not very familiar with javascript.

What would be the best way to go about this? Should there be a javascript function of some kind to make the show/hide function work? But if javascript is off, how will the function run to hide the links?

If someone can point me in the right direction to go about this or provide me with a simple code snippet, I would really appreciate it. Thanks!

Answer 1

1. Hide the links using CSS – not visible by default

   <a id="link1" href="#" style="display: none">Script link 1</a>
   <a id="link2" href="#" style="display: none">Script link 2</a>
   

2. Show the links using Javascript – they are only visible if Javascript is on, of course

   <script type="text/javascript">
        document.getElementById('link1').style.display="block";
        document.getElementById('link2').style.display="block";
   </script>
   

   Depending on what you need, you can use any other display property (link is inline by default, I added block here, use whichever you need).

3. Add the noscript stuff – only visible when Javascript is off

   <noscript>
   -two other links-
   </noscript>