Table collapse/expand rows

Bootstrap 5 Table collapse/expand rows component

Responsive Table collapse/expand rows built with Bootstrap 5. Use an accordion to collapse a table row vertically to show or hide content.

Basic example

Click + below to show and hide the table content.

# Heading Heading Heading
label
value 1
label
value 2
label
value 3
label
value 4
label
value
label
value
label
value
label
value
Edit in sandbox 
        
             
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
              <th scope="col">Heading</th>
            </tr>
          </thead>
          <tbody>
            <tr class="accordion-toggle collapsed" 
              id="accordion1" 
              data-mdb-collapse-init 
              data-mdb-parent="#accordion1" 
              href="#collapseOne"
              aria-controls="collapseOne"
            >
              <td class="expand-button"></td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
    
            </tr>
            <tr class="hide-table-padding">
              <td></td>
              <td colspan="3">
                <div id="collapseOne" class="collapse in p-3">
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value 1</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value 2</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value 3</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value 4</div>
                  </div>
                </div></td>
            </tr>
            <tr class="accordion-toggle collapsed" 
              id="accordion2" 
              data-mdb-collapse-init 
              data-mdb-parent="#accordion2" 
              href="#collapseTwo"
              aria-controls="collapseTwo"
            >
              <td class="expand-button"></td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr class="hide-table-padding">
              <td></td>
              <td colspan="4">
                <div id="collapseTwo" class="collapse in p-3">
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value</div>
                  </div>
                  <div class="row">
                    <div class="col-2">label</div>
                    <div class="col-6">value</div>
                  </div>
                </div></td>
            </tr>
          </tbody>
        </table>
      </div>
      
        
    
        
             
      tr.hide-table-padding td {
        padding: 0;
        }
      
        .expand-button {
          position: relative;
        }
      
        .accordion-toggle .expand-button:after
        {
          position: absolute;
          left:.75rem;
          top: 50%;
          transform: translate(0, -50%);
          content: '-';
        }
        .accordion-toggle.collapsed .expand-button:after
        {
          content: '+';
        }