CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Graeham Broda
Graeham Broda

Reputation: 92

Bootstrap Collapsing Table

I am trying to make several rows collapse when I click on the parent row. currently, i am only able to collapse a single row, but i need to be able to close +2 rows at the same time.

Below is my current code, in this code I cannot figure out how to collapse both the "HIDDEN" and "HIDDEN 2" rows when I click on the first row.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.hiddenRow {
    padding: 0 !important;
}
</style>


<div id="accordion" role="tablist" aria-multiselectable="true">
  <table class="table">
    <tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <td>
        test
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div>
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div>
      </td>
    </tr>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

Upvotes: 1

Views: 18040

Answers (2)

Monkey_Dev1400
Monkey_Dev1400

Reputation: 944

Instead of id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" use this example. https://jsfiddle.net/ayang10/DTcHh/33622/

<tr data-toggle="collapse" data-target=".order1">
  <td>+</td>
  <td>1001</td>
  <td>9/29/2016</td>
  <td>$126.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shirt</td>
  <td>$12.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shoes</td>
  <td>$62.27</td>
</tr>

Upvotes: 8

marcx
marcx

Reputation: 168

Because it seems that bootstrap is using the href to call the collapse function, it isn't possible to collapse more than row at a time. This is because the href can only hold one link, which in this case is the id for the row that is successfully collapsing. I tried a few hacks, such as using an inline onclick="location.href = '#collapseOne #collapseTwo'" to give the href two links on the fly, but this didn't work. Also tried to switch from using the href as the collapser to data-target, which should work with data-toggle to define multiple targets, but also unsuccessfully. This looks like it's an open issue for bootstrap:

https://github.com/twbs/bootstrap/issues/19813

This means that the best way is to either use some CSS magic i.e. #main:active {.collapse {display:none}} (only works with a preprocessor like less or sass) or to write some jquery to easily achieve the effect.

$(document).ready(function() {
    $("#main").on("click", function(){
        $("#collapseOne, #collapseTwo").hide();
    });
});

This implementation only hides the targeted id's, something like .toggle() instead of .hide() would be bidirectional.

Another method would be to nest a table inside of the row that is successfully collapsing, which should collapse the entire table inside of the row. But this is just a spitball and I haven't tested.

Here are some duplicates seeking to solve the same problem!

Expand/collapse multiple table rows with a more elegant solution

expand/collapse table rows with JQuery

Upvotes: 2

Related Questions