Javascript onClick doesn't work unless clicked twice

Question

I've got this Javascript that opens up a table to reveal the bottom rows. Unfortunately when the page loads the button that opens the table won't work until it has been clicked twice. After that it works with one click, unless the user has refreshed the page, and then it's back to a two click start.

I've got this in the header:

<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
    var tblRows = tbl.rows;
    var i;
    for (i = 0; i < tblRows.length; i++) {
        if (tblRows[i].className != "headerRow") {
        tblRows[i].style.display = (rowVisible) ? "none" : "";
    }
  }
  rowVisible = !rowVisible;
}
</script>

And this on the button

<a class="small blue btn" onClick="toggleDisplay('.$thread_no.')" >
    <small>Open</small></th>

How can I get this to work with just one click every time?

Answer 1

I think the problem might be related to the a element. The second time you click the hyperlink the empty hash is triggered so it does not trigger a second time.

You can prevent the default action or you use another element by returning false or e.preventDefault();