Javascript - show and hide table rows with buttons

Question

I'm trying to show/hide table rows with the help of buttons.

With the script I'm using now I'm only I'm only able to make one button and only able to show/hide one row.

I want to make more buttons where each button when pressed will show/hide a row. Also I want the button text to change between Info▼ and Info▲ as the first one does in my script.

If I have understood it correctly I should use classes instead of divs but I tried to do that without result.

If anyone could help me out with my script so I can produce more buttons where each one will show/hide a unique row when clicked on I would be grateful.

http://jsbin.com/tovicefu/1/edit This is a simple version of my layout. So when I press the first info button the row below should appear with one image.

Same with the other info button but it displays another row further below.

My script.

<script>

    var button_beg = '<button class="button" onclick="showhide()">', button_end = '</button>'; 
    var show_button = 'Info▼', hide_button = 'Info▲';
    function showhide() {
        var div = document.getElementById( "hide_show" );
        var showhide = document.getElementById( "showhide" );
        if ( div.style.display !== "none" ) {
            div.style.display = "none";
            button = show_button;
            showhide.innerHTML = button_beg + button + button_end;
        } else {
            div.style.display = "block";
            button = hide_button;
            showhide.innerHTML = button_beg + button + button_end;
        }
    }
    function setup_button( status ) {
        if ( status == 'show' ) {
            button = hide_button;
        } else {
            button = show_button;
        }
        var showhide = document.getElementById( "showhide" );
        showhide.innerHTML = button_beg + button + button_end;
    }
    window.onload = function () {
        setup_button( 'hide' );
        showhide(); // if setup_button is set to 'show' comment this line
    }
</script>



<table>
<tr>
<td> <div id="showhide"></div></td> 
<td> </td>
<td> </td>
</tr>


<tr>
 <td>   

    <div id="hide_show">

 <img  src="alfagel.gif" height="210" width="120"/>
    </div>
</td>
<td></td>
<td></td>
  </tr>`


<tr>
<td> <div id="showhide"></div></td> 
<td> </td>
<td> </td>
</tr>

<tr>
 <td>   

    <div id="hide_show">

 <img  src="alfagel.gif" height="210" width="120"/>
    </div>
</td>
<td></td>
<td></td>
  </tr>
</table>

Answer 1

You can use a combination of css and javascript. In this jsBin I used a data-attribute to identify 'hideable' rows.

Css:

tr[data-hide="true"] td {
  display: none;
}

Javascript to toggle visibility:

function toggleRowvisibility(e) {
  var tbl = document.querySelector('table')
     ,rows = tbl.rows;
  for (var i=0;i<rows.length; i+=1){
    var hidable = rows[i].getAttribute('data-hide');
    if (hidable) {
      rows[i].setAttribute('data-hide', /false/i.test(hidable));
    }
  }
}