Bootstrap 3 Collapse Table Icon switch

Question

I have to use a Bootstrap 3 Table where the table rows are clickable and act like an accordion.

Only one row can be "open". Clicking on collapsed row will:

open clicked collapsed row
close other row if there is any
switches icon from "plus" to "minus" on itself
switches other "minus" icons to "plus" if there are any

I have come this far:

HTML:

<div class="container">
<table class="table table-bordered" id="overview-table">

        <div id="body-1">
        <tr data-toggle="collapse" data-target="#text-1" class="accordion-toggle collapsed">
          <td scope="row" class="accordion-label">
             <span class="glyphicon glyphicon-plus-sign"></span>
             <h3>Heading 1</h3>
          </td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
        </tr>
        <tr>
            <td colspan="4" class="hiddenRow">
                <div class="accordian-body collapse clearfix" id="text-1">
                  <div class="collapse-feature-list">
                    <ul>
                      <li>Lorem</li>
                      <li>Lorem</li>
                    </ul>
                  </div>
                  <div class="collapse-link">
                    <a href="#">Link #3</a>
                    <a href="#">Link #2</a>
                    <a href="#">Link #1</a>
                  </div>
                </div>
            </td>
        </tr>
      </div>

            <div id="body-2">
        <tr data-toggle="collapse" data-target="#text-2" class="accordion-toggle collapsed" aria-expanded="false">
          <td scope="row" class="accordion-label">
             <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
             <h3>Heading 1</h3>
          </td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
          <td class="checkmark-table"></td>
        </tr>
        <tr>
            <td colspan="4" class="hiddenRow">
                <div class="accordian-body collapse clearfix" id="text-2">
                  <div class="collapse-feature-list">
                    <ul>
                      <li>Lorem</li>
                      <li>Loremr</li>
                    </ul>
                  </div>
                  <div class="collapse-link">
                    <a href="#">Link #3</a>
                    <a href="#">Link #2</a>
                    <a href="#">Link #1</a>
                  </div>
                </div>
            </td>
        </tr>
      </div>

</table>
</div>

JQUERY:

$('.collapse').on('show.bs.collapse', function () {
            $('.collapse.in').collapse('hide'); 

        });
        $('.collapse').on('shown.bs.collapse', function() {
          $(".glyphicon").addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
        });

        $('.collapse').on('hidden.bs.collapse', function() {
            $(".glyphicon").addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
        });

JSFIDDLE

How can I select the specific rows to get above functionality?

score 4 · Answer 1 · edited May 23 '17 at 12:01

4

UPDATE/SOLUTION

Ive found a CSS-only solution here https://stackoverflow.com/a/18568997/1437245

Because my .accordion-toggle is a <tr> :before acts like another table cell and breaks the layout. So I had to use .accordion-toggle td:first-child:before and .accordion-toggle.collapsed td:first-child:before to select the first cell and put the pseudo selector before that....

Working JSFIDDLE https://jsfiddle.net/DTcHh/6591/

edited May 23 '17 at 12:01

Community

1
1

answered Apr 14 '15 at 10:26

DennisKo

263
2
6
19

Dup from https://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon – MegaTux Sep 13 '17 at 13:00

score 1 · Answer 2 · answered Apr 14 '15 at 10:28

$('.collapse').on('show.bs.collapse', function () {
            $('.collapse.in').collapse('hide'); 

        });
        $('.collapsed').on('click', function() {
            $(".glyphicon").addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
            if( $(this).find(".glyphicon").hasClass('glyphicon-plus-sign')) {
                $(this).find(".glyphicon").addClass('glyphicon-minus-sign').removeClass('glyphiconplus-sign');

jsfiddle: https://jsfiddle.net/DTcHh/6594/

Bootstrap 3 Collapse Table Icon switch

2 Answers2