CODEWITHSUNDEEP
javascript
enigma2k
enigma2k

Reputation: 37

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>

Upvotes: 1

Views: 1064

Answers (2)

user3737430
user3737430

Reputation:

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>

Upvotes: 0

heyitsvajid
heyitsvajid

Reputation: 1121

You can use single button and change its text like below using "innerHTML": 

<script type="text/javascript">
var button = document.querySelector('#button');
button.addEventListener('click', function (event) {
      if (button.innerHTML == "Hide") {
     //Add Code to Hide Columns
     button.innerHTML = "Show";
      } else {
    //Add Code to Show Columns
          button.innerHTML = "Hide";
      }
    }
  );
</script>

Upvotes: 1

Related Questions