JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<table id='idTable'>
<tr><td>  Questions 1</td><td class="answer">   Answer 1</td></tr>
<tr><td>  Questions 2</td><td class="answer">   Answer 2</td></tr>
<tr><td>  Questions 3</td><td class="answer">   Answer 3</td></tr>
<tr><td>  Questions 4</td><td class="answer">   Answer 4</td></tr>
<tr><td>  Questions 5</td><td class="answer">   Answer 5</td></tr>
</table>

<input type='button' id="showButton" value='show'>
<input type='button' id="hideButton" value='hide'>

CSS

.answer {
  display: none;
}

JavaScript

document.getElementById('showButton').addEventListener('click', function() {
    showHideColumn(2, true);
})

document.getElementById('hideButton').addEventListener('click', function() {
    showHideColumn(2, false);
})

function showHideColumn(colNo, doShow) {
  var answers = document.querySelectorAll('#idTable tr td:nth-child(' + colNo + ')');
  answers.forEach(function(answer) {
  	answer.style.display = doShow ? 'table-cell' : '';
  });
}