LVeMjb

index.html

<div class="page">
  <div class="title">
    <h3>Lorem ipsum dolor sit amet.</h3>
  </div>
  <div class="body">
    <a href="#toggle" id="toggle">Toggle Table</a>
    <div class="table-wrap">
      <table id="table" class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>fdsafdsaf</th>
            <th>qwerwqrqwerewq</th>
            <th>vxzvxzvxcvxcz</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>fdsafdsa</td>
            <td>fdsafdsafsda</td>
            <td>fsadfdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>fdsafdasfsa</td>
            <td>fdsafdsafdsfsda</td>
            <td>fdsafdasfsdafdas</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>fdsafdasfdsa</td>
            <td>fdsafdsafdsafsad</td>
            <td>fdsafsdafdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>fdsafdsa</td>
            <td>fdsafdsafsda</td>
            <td>fsadfdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">5</th>
            <td>fdsafdasfsa</td>
            <td>fdsafdsafdsfsda</td>
            <td>fdsafdasfsdafdas</td>
          </tr>
          <tr>
            <th scope="row">6</th>
            <td>fdsafdasfdsa</td>
            <td>fdsafdsafdsafsad</td>
            <td>fdsafsdafdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">7</th>
            <td>fdsafdsa</td>
            <td>fdsafdsafsda</td>
            <td>fsadfdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">8</th>
            <td>fdsafdasfsa</td>
            <td>fdsafdsafdsfsda</td>
            <td>fdsafdasfsdafdas</td>
          </tr>
          <tr>
            <th scope="row">9</th>
            <td>fdsafdasfdsa</td>
            <td>fdsafdsafdsafsad</td>
            <td>fdsafsdafdsafdsa</td>
          </tr>
          <tr>
            <th scope="row">10</th>
            <td>fdsafdasfdsa</td>
            <td>fdsafdsafdsafsad</td>
            <td>fdsafsdafdsafdsa</td>
          </tr> 
        </tbody>
      </table>
    </div>
  </div>
</div>

LVeMjb.markdown

LVeMjb

A Pen by Captain Anonymous on CodePen.

License.

script.js

$('document').ready(function(){
  
  var $table = $('.table-wrap');
  
   $('#toggle').on('click', function(e) {
     e.preventDefault;
     
     $table.toggleClass('open');
     
     return false;
   });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*  {
  box-sizing: border-box;
}

html {
  font-family: open-sans, sans-serif;  
  font-weight: 400;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.page {
  margin: 0 auto;
  width: 960px;
  border: 1px solid #eee;
  padding: 20px;
}

.title {
  padding: 20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.table {
  
}

.table-wrap {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s;
  
  &.open {
    max-height: 1000px;
  }
}