change glyphicon in bootstrap row when row is clicked

Question

expanding on the answers here: Bootstrap 3 collapse change chevron icon on click

I'm trying to get a glyph to change to up when a table row is expanded, but it's not working, and my knowledge of js is very limited. I've tried taking trante's answer

$('.chevron_toggleable').on('click', function() {
  $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

 <span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

and modifying it as following:

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

where accordion-toggle is the class name of the row that can do the collapsing. While the row collapses as it should, the icon doesn't change. I've tried changing "td" to "table", "tr", etc and it doesn't seem to work

Update: for APAD:

I'm generating the entire table using php, but here is the relevant code:

   if (mysqli_num_rows($result)) {
                        echo '<table id="dasTable" cellpadding="0"      cellspacing="0" class="table table-responsive 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="bg-info accordion-toggle" data-toggle="collapse" id="', $sidvalue, '" data-target=".', $sidvalue, '">';
                    echo '<td><span class="glyphicon glyphicon-plus"></span> ', $sidvalue, '</td>';
                    echo '<td>', $assigned, '</td>';
                    echo '<td>', $station, '</td>';
                    echo '<td>', $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>';
                    echo '<td class="h4" colspan="4"><span class="glyphicon glyphicon-hdd"></span> ', $used, ' Bytes</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) {
                            echo '<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:100%">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, '%">', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)</div>';
                    }
                    echo '</div>';
                    echo '</td>';
                    echo '</tr>';
            }
            echo '</tbody>';
            echo '</table><br />';
    }

This generates a table that looks like the following:

When the user clicks anywhere on the row, it expands out to reveal the following:

Answer 1

This would do the job for you:

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

considering this html:

<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>

JSFIDDLE

Answer 2

The problem is you are using .closest, which tests the element itself and then traverses up the DOM to find the closest element - that function would not look at your tr's children. Use .find instead. It's possible that what I have below won't work, based on your document structure. But if you can write a selector that finds the correct td, just swap that out with the current selector in .find.

$(this).find("td").find("chevron_toggleable").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');