Test Case Boilerplate

Fork this way...

by Timmy Willison

HTML

<table width="800">
    <tr><td>
        <h4>Click to Expand</h4>
        <p style="display:none">You will need to size your browser window to something less than around 400 pixels wide to see the snap effect. The smaller the width of the window, the more dramatic the snap effect. Try it at 100 pixels wide. When wide, it will scroll smoothly. </p>
    </td></tr>
    <tr><td>
        <h4>Click to Expand - Second Row required to demonstrate</h4>
        <p style="display:none">This row should always slide smoothly since there is nothing below it.</p>
    </td></tr>
  </table>

CSS

p { display: block; }

JavaScript

$('td').click( function(event){
    var $this = $(this);
    if ( $this.hasClass('open') ) {
        $this.children('p').slideUp('slow');
    } else {
        $this.children('p').slideDown('slow');
    }
    $this.toggleClass('open');
});