Collapsible div inside of bootstrap table

Question

I am attempting to add a collapsible div inside of my bootstrap table. I am attempting to do this within my first column after the header titled "COLLAPSE HERE" I've wrapped the down icon in an anchor tag attempting to have the icon be the toggle of the collapsible. I then nested a <div></div> wrapping around the row of table that that i'd like to appear / hide on toggle. Currently, this has no effect on my table. I am using bootstraps method of collapsable but if this can be achieved in javascript that works fine.

Here is a code snippet of my code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


        <table class="table table-hover">
            <colgroup>
                <col span="1" style="width: 116px;">
                <col span="1" style="width: 116px;">
                <col span="1" style="width: 116px;">
                <col span="1" style="width: 116px;">
             </colgroup>
            <thead>
                <tr>
                    <th scope="col">First</th>
                    <th scope="col">Second</th>
                    <th scope="col">Third</th>
                    <th scope="col">Four</th>
                    <th scope="col">TITLE</th>
                </tr>
            </thead>
            <tbody class="text-18">
                <tr>
                    <th scope="row" id="3digit">COLLAPSE HERE <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i
                        class="fas fa-chevron-down"></i> </a></th>
                    <th scope="row"></th>
                    <th scope="row"></th>
                    <th scope="row"></th>
                    <th>Online Stores</th>
                </tr>   
               </tbody>         
               <tbody>  
                   <div class="collapse" id="collapseExample">
                <tr>
                    <th scope="row">1</th>
                    <th scope="row">2</th>
                    <th scope="row">3</th>
                    <th scope="row">4</th>
                    <th>Retail</th>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <th scope="row">2</th>
                    <th scope="row">3 </th>
                    <th scope="row">4</th>
                    <th>Appointment</th>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <th scope="row">2</th>
                    <th scope="row">3</th>
                    <th scope="row">4</th>
                    <th>Orders</th>
                </tr>
            </div>
            </tbody>
        </table>

My expected outcome is to have everything under the first row under the "COLLAPSE HERE" title and icon to collapse the table.

dale landry dale landry · Accepted Answer · 2020-12-17T04:42:56

Here is a vanilla JavaScript option that adds some animation to the collapse.

I grab the div you wish to collapse, and the class for the chevron. I use querySelector() as there is only one of each of these classes in your code and this selector method will return the first iteration of that class. I then add an eventListener click and add a conditional to check if the targeted element, .col has opacity set to 0. If it is set to 0 we set a transition to all .5s ease-in-out, a half second ease-in-out on the opacity. We set the Y overflow to hidden and then toggle the chevron by removing the up and adding the down, using .remove() and .add() on the event.target => chevron.

else we also add a transition animation and reverse the fas classes again using .add() and .remove().

let col = document.querySelector('.col');
let fas = document.querySelector('.fas');
let digit3 = document.getElementById('digit3');

const collapsable = (e) => {
  fas.classList.toggle('fa-chevron-down');
  if (col.style.opacity === '0') {
    col.style.opacity = '1';
    digit3.children[0].innerText = 'COLLAPSE HERE';
    col.style.transition = 'all .5s ease-in-out';
    col.style.transition = '-webkit-transition: all .2s ease-in-out';
    col.style.transition = '-moz-transition: all .2s ease-in-out';
    col.style.transition = '-ms-transition: all .2s ease-in-out';
    col.style.transition = '-o-transition: all .2s ease-in-out';
    col.style.overflowY = 'hidden';
    e.target.classList.remove('fa-chevron-down');
    e.target.classList.add('fa-chevron-up');
  } else {
    col.style.opacity = '0';
    digit3.children[0].innerText = 'EXPAND HERE';
    col.style.transition = 'all .5s ease-in-out';
    col.style.transition = '-webkit-transition: all .2s ease-in-out';
    col.style.transition = '-moz-transition: all .2s ease-in-out';
    col.style.transition = '-ms-transition: all .2s ease-in-out';
    col.style.transition = '-o-transition: all .2s ease-in-out';
    col.style.maxHeight = '0px';
    e.target.classList.remove('fa-chevron-up');
    e.target.classList.add('fa-chevron-down');
  }
}

fas.addEventListener('click', collapsable);

.fas {
 margin-left: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<table class="table table-hover">
  <colgroup>
    <col span="1" style="width: 116px;">
    <col span="1" style="width: 116px;">
    <col span="1" style="width: 116px;">
    <col span="1" style="width: 116px;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Second</th>
      <th scope="col">Third</th>
      <th scope="col">Four</th>
      <th scope="col">TITLE</th>
    </tr>
  </thead>
  <tbody class="text-18">
    <tr>
      <th scope="row" id="digit3"><span>COLLAPSE HERE</span><a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-controls="collapseExample"><i
                        class="fas fa-chevron-up"></i> </a></th>
      <th scope="row"></th>
      <th scope="row"></th>
      <th scope="row"></th>
      <th>Online Stores</th>
    </tr>
  </tbody>
  <tbody class="col">
    <div id="collapseExample">
      <tr>
        <th scope="row">1</th>
        <th scope="row">2</th>
        <th scope="row">3</th>
        <th scope="row">4</th>
        <th>Retail</th>
      </tr>
      <tr>
        <th scope="row">1</th>
        <th scope="row">2</th>
        <th scope="row">3 </th>
        <th scope="row">4</th>
        <th>Appointment</th>
      </tr>
      <tr>
        <th scope="row">1</th>
        <th scope="row">2</th>
        <th scope="row">3</th>
        <th scope="row">4</th>
        <th>Orders</th>
      </tr>
    </div>
  </tbody>
</table>

Collapsible div inside of bootstrap table

1 Answers