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: enter image description here

When the user clicks anywhere on the row, it expands out to reveal the following: enter image description here

Responding to your comment on my answer: you'll need to post the relevant HTML and if possible a JSFiddle to get an exact answer - the question as is makes it impossible for someone to definitively provide an answer. — p e p, May 06 '15 at 18:09

score 2 · Accepted Answer · answered May 06 '15 at 18:05

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

Winner winner chicken dinner! worked perfectly. Thank you sir! — Evan R., May 08 '15 at 15:35

score 0 · Answer 2 · answered May 06 '15 at 18:03

0

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

answered May 06 '15 at 18:03

p e p

6,593
2
23
32

thanks for the quick reply pep. I tried that, and it didn't seem to work either. I found a somewhat related post: http://stackoverflow.com/questions/2931234/jquery-get-the-value-of-first-td-in-table that led me to try changing to this as well: $(this).closest("tr").children('td:first').find("chevron_toggleable").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); but that also didn't work. I tried your code, and it doesn't toggle when the row is clicked, but ill keep working on it. – Evan R. May 06 '15 at 18:07

change glyphicon in bootstrap row when row is clicked

2 Answers2