Table Collapse with Bootstrap Framework

Question

Table Collapse with Bootstrap Framework

I am currently facing an issue where I can only collapse a single row when clicking on the parent row. However, my requirement is to be able to close multiple rows simultaneously.

Here is the code I am using, but I am struggling to figure out how to collapse both the "HIDDEN" and "HIDDEN 2" rows when the first row is clicked.

<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>

html css twitter-bootstrap

Answer 1

Answer №1

Instead of using the code

id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

, try implementing this alternative example: https://example.com/jsfiddle

<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>

Answer 2

Instead of using the code

id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

, try implementing this alternative example: https://example.com/jsfiddle

<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>

Answer 3

Answer №2

Bootstrap seems to be limited in collapsing multiple rows at once due to its use of the href attribute for the collapse function. This constraint arises from the fact that the href can only contain a single link, typically the id of the row being collapsed. Various attempts to work around this limitation, such as dynamically adding multiple links to the href attribute or using data-target instead, have proved unsuccessful. This issue is acknowledged by the Bootstrap community and remains unresolved:

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

As a workaround, one could explore alternative solutions such as leveraging CSS techniques like

#main:active {.collapse {display:none}}

(compatible with preprocessors like less or sass) or implementing custom jQuery scripts for achieving the desired collapsing effect:

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

Note that the provided jQuery script hides the targeted ids, offering unidirectional functionality. For toggling visibility bidirectionally, consider using methods like .toggle() instead of .hide().

An alternate approach involves nesting a table within the collapsing row to collapse all content inside it simultaneously. However, this strategy remains hypothetical and warrants testing.

For further insights and potential solutions, refer to related discussions addressing similar challenges:

Expand/collapse multiple table rows with a more elegant solution

expand/collapse table rows with JQuery

Answer 4

Bootstrap seems to be limited in collapsing multiple rows at once due to its use of the href attribute for the collapse function. This constraint arises from the fact that the href can only contain a single link, typically the id of the row being collapsed. Various attempts to work around this limitation, such as dynamically adding multiple links to the href attribute or using data-target instead, have proved unsuccessful. This issue is acknowledged by the Bootstrap community and remains unresolved:

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

As a workaround, one could explore alternative solutions such as leveraging CSS techniques like

#main:active {.collapse {display:none}}

(compatible with preprocessors like less or sass) or implementing custom jQuery scripts for achieving the desired collapsing effect:

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

Note that the provided jQuery script hides the targeted ids, offering unidirectional functionality. For toggling visibility bidirectionally, consider using methods like .toggle() instead of .hide().

An alternate approach involves nesting a table within the collapsing row to collapse all content inside it simultaneously. However, this strategy remains hypothetical and warrants testing.

For further insights and potential solutions, refer to related discussions addressing similar challenges:

Expand/collapse multiple table rows with a more elegant solution

expand/collapse table rows with JQuery

Table Collapse with Bootstrap Framework

Answer №1

Answer №2

Similar questions

Javascript is malfunctioning when trying to import Bootstrap library

What is the best way to evenly distribute items in nested CSS Grid Columns?

Determine in Jquery if all the elements in array 2 are being utilized by array 1

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

Using jQuery to enable scrolling and dynamically changing classes

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

What approach do you recommend for creating unique CSS or SCSS styles for the same component?

ReactJS component experiencing issues with loading images

Ways to align a Unordered List (ul) in the middle

I completed the footer on my website, but as I zoom in on the page, everything becomes jumbled and overlapped

Is there a method in PHP to conceal HTML code?

Tips on replacing a React component's styling with emotion CSS

Prevent touch swiping on Bootstrap carousel in Safari

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

What methods can be used to optimize web page designs for varying levels of user privilege?

Display and conceal the information with a hyperlink

Activating hardware acceleration: utilizing translate3d

Initiating a horizontal scroll menu at the center of the screen: Step-by

What is the best method to vertically center a container in bootstrap 4 at a specified height?