toggle table row using jquery

by santosh_patnala

HTML

<div>
    <div class="row" id="row1">
        <div class="floatedCell">1</div>
        <div class="floatedCell">1.1</div>
        <div class="floatedCell">1.2</div>
        <div class="clear"></div>
    </div>
    <div class="row">
        <div class="floatedCell">2</div>
        <div class="floatedCell">2.1</div>
        <div class="floatedCell">2.2</div>
        <div class="clear">
    </div>
</div>
<button onClick="$('#row1').slideUp(500);">Click  Me!</button>

CSS

.floatedCell {
  float:left;
  border-right: 1px solid black; 
  width: 10%; 
  height: 100%;
}
.clear {
  clear: both;   
}
#row1 {
   height: 100px;   
}
.row {
   border: 1px solid black   
}