Question

I have an anchor tag. I want to hide/show it dynamically. I can’t put it inside a div /span for some reason. How can i do it?

Answer 1

Once you have a reference to the DOM element for the anchor tag, do this:

// Hide
element.style.display = "none";

// Show again
element.style.display = "";

There are several ways you’d get that reference. For instance, if the anchor has an id, you can use getElementById:

HTML:

<a href='whatever' id='foo'>Whatever</a>

JavaScript:

element = document.getElementById('foo');

If the anchor doesn’t have an ID and you don’t want to add one for whatever reason, you can use other information about it to identify the correct element. This is most easily done with a library like jQuery, Prototype, YUI, Closure, or any of several others that will give you the ability to use CSS selectors to find the anchor(s) in question. Without a library, you have to rely on a small number of well-supported DOM functions or deal with browser variations, which is what the libraries help you avoid.

Here’s an example (live copy) of looping through all of the anchors on a page and hiding one based on its href:

HTML:

<a href='http://stackoverflow.com'>StackOverflow</a>
<a href='http://superuser.com'>SuperUser</a>
<a href='http://serverfault.com'>ServerFault</a>

JavaScript:

var links, index, link;

links = document.getElementsByTagName('a');
for (index = 0; index < links.length; ++index) {
  link = links[index];
  if (link.href.indexOf('superuser') >= 0) {
    link.style.display = "none";
    break;
  }
}

That gets dramatically easier if you use a library. For instance, here’s a jQuery version of it (live copy):

$('a[href*=superuser]').hide();

Here’s the Prototype version (live copy):

$$('a[href*=superuser]').invoke('hide');