Jquery chevron icon not toggling down with accordion row when collapsed

Question

First, My jfiddle: http://jsfiddle.net/34y943qq/

I have a bootstrap table with accordion properties that expands child rows when clicked. When I click another row, it expands, as well as collapses the previously opened row. This works, however the chevron icons I am using to indicate drop-down status don't seem to flip back.

I made a change http://jsfiddle.net/34y943qq/1/, but this also seems to not cause previous toggled chevrons to collapse. The only way I can get a chevron to toggle back is clicking directly on a row to open/close it.

Here's the jscript I added:

$(this).find('span').closest('.chevron_toggleable')
    .not(this)
    .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

I've also tried moving the ".not(this)" up to the find('span') but this doesn't seem to work either.

What am I missing?

here's the code to generate the table:

 if (mysqli_num_rows($result)) {
    echo '<table id="dasTable" cellpadding="0" cellspacing="0" class="table table-hover table-bordered tablesorter">';
    echo '<thead>';
    echo '<tr><th>Service ID</th><th>Assigned Namespace</th><th>DAS Station</th><th>Ingest Completed</th><th>Currently Ingesting</th><th>Offsite going to DAS</th><th>Mounted</th></tr></thead>';
    echo '<tbody>';

    // Generate rows from current das information
    while ($row2 = mysqli_fetch_row($result)) {

        // Format cell background based on content
        $sidvalue       = $row2[0];
        $station        = $row2[1];
        $used           = $row2[2];
        $attacheddate   = $row2[3];
        $starteddate    = $row2[4];
        $ingestcomplete = $row2[5];
        $ingesting      = $row2[6];
        $updating       = $row2[7];
        $mounted        = $row2[8];
        $totaljobs      = $row2[9];
        $remainingjobs  = $row2[10];
        $assigned       = $row2[11];
        echo '<tr class="accordion-toggle" data-toggle="collapse" id="', $sidvalue, '" data-target=".', $sidvalue, '">';
        echo '<td class="rowtd"><span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span> ', $sidvalue, '</td>';
        echo '<td class="rowtd">', $assigned, '</td>';
        echo '<td class="rowtd">', $station, '</td>';
        echo '<td class="rowtd">', $ingestcomplete, '</td>';
        if ($ingesting == 'GREEN') {
            echo '<td class="success">YES</td>';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '<td class="success">NO</td>';
            } else {
                echo '<td class="danger">NO</td>';
            }
        }

        if ($updating == 'GREEN') {
            echo '<td class="success">NO</td>';
        } else {
            echo '<td class="danger">YES</td>';
        }

        if ($mounted == 'GREEN') {
            echo '<td class="success">YES</td>';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '<td class="success">NO</td>';
            } else {

                echo '<td class="danger">NO</td>';
            }
        }
     echo '</tr>';

Actually, I see where it's called twice:

 // create the sub row
            echo '<tr class="expand-child collapse ', $sidvalue, '">';
            echo '<td class="h4" colspan="3"><b>Attached Date:</b> ', $attacheddate, '</td>';
            $usedgb = round($used / 1024 / 1024 / 1024);
            echo '<td class="h4" colspan="4"><i class="fa fa-hdd-o fa-lg"></i> ', $used, ' Bytes (', $usedgb, ' GB)</td>';
            echo '</tr>';
            echo '<tr class="expand-child collapse ', $sidvalue, '">';
            echo '<td class="h4" colspan="3"><b>Ingest Start Date:</b> ', $starteddate, '</td>';
            echo '<td class="h4" colspan="4">';
            echo '<div class="progress">';
            if ($remainingjobs == 0) {
                $jobsdone = $totaljobs - 1;
                $percentdone = round($jobsdone / $totaljobs * 100);
                echo '<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="', $percentdone, '" aria-valuemin="0" aria-valuemax="100" style="width:', $percentdone, '%">Last Job</div>';
            } else {
                $jobsdone = $totaljobs - $remainingjobs;
                $percentdone = round($jobsdone / $totaljobs * 100, 1);
                echo '<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:', $percentdone, '%"><b>', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)</b></div>';
            }
            echo '</div>';
            echo '</td>';
            echo '</tr>';
        }

The reason they are both called "expand child collapse, is due to a SO question I found a while back on how to make expanding rows...I'm trying to find the link now, but I believe the gist was that each sub row needed the same collapse name so when the parent row was clicked, it would collapse all children rows.

Edit: here we go Creating Accordion Table with Bootstrap

That example has 1 sub row for each expanding row, I added a second row to be expanded with the same name, based on code found here: http://www.bootply.com/122871

stanley1943 · Accepted Answer · 2015-09-12T16:57:08.703

DEMO: http://jsfiddle.net/rn07jq35/2/ Check the first three lines compare to the performance of the rest

Was at work and didnt ave time to try things.

I have edit the answer to this

$(document).ready(function () {
    $(function () {
        $("#dasTable").tablesorter();
    });
});
$('.collapse').on('show.bs.collapse', function (e) {
    $("#dasTable").find('.collapse.in').collapse('hide');

    var targetx = $(this).data('trigger');
    $(targetx).find('span').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
$('.collapse').on('hide.bs.collapse', function (e) {
    var targetx = $(this).prev('.accordion-toggle').find('span');
    var targetx = $(this).data('trigger');
    $(targetx).find('span').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});

The thing about child is this

        <tr class="accordion-toggle" data-toggle="collapse" id="1dc4" data-target=".1dc4">
            <td class="rowtd"> <span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span> 1dc4</td>
            <td class="rowtd">Gen2_SJC9</td>
            <td class="rowtd">adsdas5</td>
            <td class="rowtd">NO</td>
            <td class="success">YES</td>
            <td class="success">NO</td>
            <td class="success">YES</td>
        </tr>
        <tr class="expand-child">
            <td colspan="7">
                <div class="container collapse 1dc4" data-trigger="#1dc4">
                    <div class="left"><b>Attached Date:</b>2015-08-26 16:42:04</div>
                    <div class="right"><i class="fa fa-hdd-o fa-lg"></i> 2883577569280 Bytes (2686 GB)</div>
                    <div class="left"><b>Ingest Start Date:</b> 2015-08-31 19:10:14</div>
                    <div class="right">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:86.7%"><b>13/15 (86.7%)</b>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

So you essentially have one child. Then you put your collapse within your <div> tag rather than your <tr> tag.

Hope this helps.

RE: opening twice, that's a good question, and shouldn't be happening (i was wondering why it has a slight lag when opening/collapsing, and isn't smooth like other demos). I'll post an answer to this with my code that generates the table, I can't find out why it's doing it twice. — Evan R., Sep 04 '15 at 17:46
This works, except the progress bar and used space fields snap left upon expanding. In the jsfiddle you don't notice it by default, but if you slide the pane left (so the results take up more space, you'll notice it once you expand a row out" It's as if the "right" div's aren't respecting a 50% width. — Evan R., Sep 09 '15 at 22:10
make the .collapse.in `display:block;` http://jsfiddle.net/rn07jq35/3/ see, if that solves your problem. — stanley1943, Sep 09 '15 at 22:35
that solves it. Thank you sir! As an alternate, changing the right width to 400px also solved it, but kept it aligned with the column border above... with the display:block it pulls left slightly which my team believes makes the row stand out more. thanks! — Evan R., Sep 09 '15 at 22:40

score -1 · Answer 2 · answered Sep 03 '15 at 23:19

-1

I'd put the swapping chevron part in the click function like this:

$('.accordion-toggle').on('click', function() {
    $('.chevron_toggleable').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    $(this).find('span').closest('.chevron_toggleable').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

JSFiddle

answered Sep 03 '15 at 23:19

imtheman

4,360
1
26
28

i didn't even think to clear the class first. This worked, so accepting this – Evan R. Sep 04 '15 at 17:44

Jquery chevron icon not toggling down with accordion row when collapsed

2 Answers2