Make a dynamic table using hide content in JavaScript

When you click row 1, cell 1 in the following table, the column 2 content shows.
Same for row 2. So you can make a dynamic table to show and hide row and column contents

Show	Hide/Show
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Source code:
 <style type="text/css">

.hidden { display: none; }

.displayed { display: block; }

</style>

<script type="text/javascript">

function display(divID) {

    var item = document.getElementById(divID);

  

    if (item) {

        item.className=(item.className=='hidden')?'displayed':'hidden';

    }

}

</script>

<table border="1", width="100%">

<tr> <td width="50%"> Show </td> <td width="50%">Show/Hide </td>

<tr>

<tr> <td><a id='toggletext' href="javascript:display('row1');">row 1, cell 1</a></td> <td id="row1" class="hidden">row 1, cell 2</td> </tr>

<tr> <td><a id='toggletext' href="javascript:display('row2');">row 2, cell 1</a></td> <td id="row2" class="hidden">row 2, cell 2</td> </tr>

</table>