Значок шеврона Jquery не переключается вниз с помощью строки аккордеона при сворачивании

Во-первых, мой jfiddle: http://jsfiddle.net/34y943qq/

У меня есть таблица начальной загрузки со свойствами аккордеона, которая расширяет дочерние строки при нажатии. Когда я нажимаю другую строку, она расширяется, а также сворачивает ранее открытую строку. Это работает, однако значки шеврона, которые я использую для обозначения раскрывающегося состояния, похоже, не переворачиваются.

Я внес изменение http://jsfiddle.net/34y943qq/1/, но это также кажется чтобы не свернуть предыдущие переключенные шевроны. Единственный способ, которым я могу заставить шеврон переключаться назад, - это щелкнуть прямо по строке, чтобы открыть / закрыть ее.

Вот jscript, который я добавил:

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

Я также пытался переместить ".not(this)" до find('span'), но это тоже не работает.

Что мне не хватает?

вот код для создания таблицы:

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

На самом деле, я вижу, где это вызывается дважды:

 // 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>';
        }

Причина, по которой они оба называются «расширить дочерний коллапс», связана с вопросом ТАК, который я нашел некоторое время назад о том, как сделать расширяющиеся строки ... Я пытаюсь найти ссылку сейчас, но я считаю, что суть в том, что каждый суб Строке требовалось одно и то же имя свертывания, поэтому при щелчке по родительской строке все дочерние строки сворачивались.

Изменить: здесь мы идем Создание аккордеонной таблицы с помощью Bootstrap

В этом примере есть 1 подстрока для каждой расширяемой строки, я добавил вторую расширяемую строку с тем же именем на основе кода, найденного здесь: http://www.bootply.com/122871