<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
        <table class="table table-hover">
          <caption id="meeting-caption">My Caption</caption>
          <thead>
          <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
            <th>Heading 4</th>
            <th>Heading 5</th>
          </tr>
          </thead>
          <tbody>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
              <td>Value 5</td>
              <td>
                <div class="btn-group">
                  <button class="btn btn-primary btn-xs hide-panel">
                    <span class="glyphicon glyphicon-eye-open"></span>Toggle
                  </button>
                </div>
              </td>
            </tr>
            <tr class="toggleable">
              <td colspan="7">
                <div class="slide-panel">
                  <div class="col-lg-3">
                    <h4>Links</h4>
                    <ul>
                      <li><a href="#">Value 6</a></li>
                      <li><a href="#">Value 7</a></li>
                      <li><a href="#">Value 8</a></li>
                      <li><a href="#">Value 9</a></li>
                      <li><a href="#">Value 10</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-5">
                    <h4>Text</h4>
                    <h5>Heading 1</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Heading 2</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
        
                    <h5>Header 3</h5>
        
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis placerat turpis. Etiam dignissim fermentum nulla sit amet finibus. Donec at tincidunt purus. In consequat lectus auctor nunc sagittis, a blandit est placerat. Nunc ullamcorper, erat vel porta sagittis, velit odio dictum mi, sit amet semper sapien eros nec nibh. Nullam suscipit mi ac sapien ornare efficitur. Vivamus auctor bibendum pretium. Mauris in pharetra lacus, sit amet pretium ante. Donec nec lorem placerat, tempus odio sed, mattis dui.</p>
                  </div>
                  <div class="col-lg-3">
                    <h4>Other</h4>
                    <ul>
                      <li>More Info 1</li>
                      <li>More Info 2</li>
                      <li>More Info 3</li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
    </div>
</div>

.toggleable {
  background-color: #EFEFEF;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
  .slide-panel {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
  }
}

.even {
  background-color: #F9F9F9;
}

.odd {
  background-color: transparent;
}

$('.toggleable').hide();
$('.slide-panel').slideUp();
$('.btn-primary').removeClass('hide').click(function (event)
{
  var $this = $(this);
  var mainTr = $this.closest('tr');
  var hiding = $this.hasClass('hide-panel');

  event.preventDefault();
  event.stopPropagation();

  if (hiding)
  {
    mainTr.next().show().find('.slide-panel').slideDown();
    $this.removeClass('hide-panel');
  }

  if (! hiding)
  {
    mainTr.next().find('.slide-panel').slideUp(function()
    {
      mainTr.next().hide();
    });
    $this.addClass('hide-panel');
  }
});