Hide a table and change some text

Question

I need to write a little Javascript to hide a table (by adding the hidden style class) and then change the text of the link to represent the state. The hiding part works but the changing of text does not. Here's the javascript...

 function toggle(idToHide, hiderID) {
    var element = document.getElementById(idToHide);
    var hiddenClass = " hidden";
    if(element.getClassName().contains(hiddenClass)) {
       document.getElementById(hiderID).innerHTML = "Hide";
       element.className = element.className.replace(hiddenClass,'');
    } else {
       document.getElementById(hiderID).innerHTML = "Show";
       element.className += hiddenClass;
    }
  }

...and the Markup...

<a id="mercurial.repos.inactive.hider" href="#" onclick="toggle('mercurial.repos.inactive', 'mercurial.repos.inactive.hider'); return false;">Hide</a>

<table id="mercurial.repos.inactive">...</table>

Any clue as to why it wouldn't be changing the text of the hider link? If I run the specific line from the console, it works fine.

This is part of a JIRA Plugin if that makes any difference.

Answer 1

Why getClassName?

Try:

if(element.className.contains(hiddenClass)) {

Also, maybe check for hiddenClass = "hidden" // (No space) and then add a space and the class name when you do add it, like:

element.className += " " + hiddenClass;

Answer 2

I use Chrome and the Javascript debugger to sort this out. BTW, if this for the JIRA Mercurial plugin, a patch would be welcome. Looks like you're trying to make the configuration of lots of repositories easier? That's good, because my UX skills are, er, average at best :-)

~Matt

Answer 3

I eventually abandoned this and simply replaced it with "Show/Hide" instead of trying to swap between the texts.