Q:

Creating a show/hide button to toggle table column

I made a table that has questions on the left side and answers on the right side. By default these answers are hidden. If the user presses a button, they show up. 
I've found this code and modified it quite a bit but what is still missing is a single button that toggles between Show and Hide. I don't like having two separate buttons. 
Since I wanted the answers to be hidden at the beginning I called up the function with showHideColumn(1, false);. Is this correct or is there any nicer approach for this? Are there any other things once could do to optimize the code? (I'm new to programming)
Thanks.
<table id='idTable'>
  <tr><td> Questions 1</td><td> Answer 1</td></tr>
  <tr><td> Questions 2</td><td> Answer 2</td></tr>
  <tr><td> Questions 3</td><td> Answer 3</td></tr>
  <tr><td> Questions 4</td><td> Answer 4</td></tr>
  <tr><td> Questions 5</td><td> Answer 5</td></tr>
</table>
<input type='button' onClick='javascript:showHideColumn(1, true);' value='show'>
<input type='button' onClick='javascript:showHideColumn(1, false);' value='hide'>

<script>
  showHideColumn(1, false);

  function showHideColumn(colNo, doShow) {
    var rows = document.getElementById('idTable').rows;

    for (var row = 0; row < rows.length; row++) {
      var cols = rows[row].cells;
      if (colNo >= 1 && colNo < cols.length) {
        cols[colNo].style.display = doShow ? '' : 'none';
      }
    }
  }
</script>

A:

First of all set global var doShow and change the bool value on every click true and false with current button value
if( doShow ){
    doShow = false;
    e.value = 'show';
}else{
    e.value = 'hide';
    doShow = true;
}

Remove second button.
<table id='idTable'>
    <tr>
        <td> Questions 1</td>
        <td> Answer 1</td>
    </tr>
    <tr>
        <td> Questions 2</td>
        <td> Answer 2</td>
    </tr>
    <tr>
        <td> Questions 3</td>
        <td> Answer 3</td>
    </tr>
    <tr>
        <td> Questions 4</td>
        <td> Answer 4</td>
    </tr>
    <tr>
        <td> Questions 5</td>
        <td> Answer 5</td>
    </tr>
</table>
<input type='button' onClick='javascript:showHideColumn(this, 1);' value='show'> 

and update your custom function prams like this showHideColumn(this, 1) and this showHideColumn(null, 1)
<script>
showHideColumn(null, 1);

var doShow;

function showHideColumn(e, colNo) {
    if (e != null) {
        if (doShow) {
            doShow = false;
            e.value = 'show';
        } else {
            e.value = 'hide';
            doShow = true;
        }
    }
    var rows = document.getElementById('idTable').rows;

    for (var row = 0; row < rows.length; row++) {
        var cols = rows[row].cells;
        if (colNo >= 1 && colNo < cols.length) {
            cols[colNo].style.display = doShow ? '' : 'none';
        }
    }
}
</script>

