How can I add bootstrap 4.0.0 Collapse to an html table?

Question

Hello I was wondering how could I add collapsable elements to an html table?

My code is this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="20" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="20" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="21" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="21" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="22" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="22" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

What I am looking for is to be able to press the TYPE "301" row and collapse the rest of the table content.

IMG EXAMPLES:

Pressing the Highlighted 301 text/row should collapse out the rest of the data.

IMG after data was collapsed by pressing the 301 text/row:

Thanks in advance for your time end effort, please make sure to include any references about bootstrap css or js file ( I have included the whole CSS and JS folders included in the 4.0.0 bootstrap ZIP )

Answer 1

Bootstrap does not have this functionality. Here is an option for you that does what you want. Bootstrap wasn't cooperating with this, so if you want to see it with styling, go here: https://codepen.io/shikkaba/pen/qBKbrWm

On click of a tr that is in tbody, all siblings with class of .option are hidden, and the next item is unhidden. All of the "answers" have to have the class to hide them already applied on them for this to work properly as this is literally just toggling a class.

$("table tbody tr.option").click(function() {
  // Show current `tr` and hide others
  $(this).siblings(".option").toggleClass("hide");
  $(this).next().toggleClass("hide");
});

.hide {
  display: none !important;
}

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

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>301</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">302</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>302</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  option">
      <th scope="row" data-label="Type">303</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row hide">
      <th>303</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>