Slider Components

slider.css

tr.slider {
  display: none;
}

slider.html

<table>
  <tr class="handle">
    <td></td>
    <td></td>
  </tr>
  <tr class="slider">
    <td colspan="2">
    </td>
  </tr>
  <tr class="handle">
    <td></td>
    <td></td>
  </tr>
  <tr class="slider">
    <td colspan="2">
    </td>
  </tr>
</table>

slider.js

$(function(){
  $('tr.handle input').bind('click', function(event){
    event.stopPropagation();
  });


  $('tr.slider').prev().css('cursor', 'pointer');
  $('tr.slider').prev().bind('click', function() {
    slider_row = $(this).next();

    if( slider_row.css('display') == 'none' )
    {
      slider_row.show();
    }
    else
    {
      slider_row.hide();
    }
  })
});