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 '';
    echo '';
    echo '';
    echo '';

    // 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 '';
        echo '';
        echo '';
        echo '';
        echo '';
        if ($ingesting == 'GREEN') {
            echo '';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '';
            } else {
                echo '';
            }
        }

        if ($updating == 'GREEN') {
            echo '';
        } else {
            echo '';
        }

        if ($mounted == 'GREEN') {
            echo '';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '';
            } else {

                echo '';
            }
        }
     echo '';
Actually, I see where it's called twice:
 // create the sub row
            echo '
';
            echo '';
            $usedgb = round($used / 1024 / 1024 / 1024);
            echo '';
            echo '';
            echo '';
            echo '';
            echo '';
            echo '';
        }
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
Service ID Assigned Namespace DAS Station Ingest Completed Currently Ingesting Offsite going to DAS Mounted
 ', $sidvalue, ' ', $assigned, ' ', $station, ' ', $ingestcomplete, ' YES NO NO NO YES YES NO NO



Attached Date: ', $attacheddate, '  ', $used, ' Bytes (', $usedgb, ' GB)
Ingest Start Date: ', $starteddate, ' ';
            echo '';
            if ($remainingjobs == 0) {
                $jobsdone = $totaljobs - 1;
                $percentdone = round($jobsdone / $totaljobs * 100);
                echo 'Last Job';
            } else {
                $jobsdone = $totaljobs - $remainingjobs;
                $percentdone = round($jobsdone / $totaljobs * 100, 1);
                echo '', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)';
            }
            echo '';
            echo '

stanley1943 · Accepted Answer

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

        
              1dc4
            Gen2_SJC9
            adsdas5
            NO
            YES
            NO
            YES
        
        
            
                
                    Attached Date:2015-08-26 16:42:04
                     2883577569280 Bytes (2686 GB)
                    Ingest Start Date: 2015-08-31 19:10:14
                    
                        
                            13/15 (86.7%)

So you essentially have one child. Then you put your collapse within your

tag rather than your tag.

Hope this helps.

Jquery chevron icon not toggling down with accordion row when collapsed

Answers (2)

Related Questions