Bootstrap 3 Table Accordion v1

Working Table with Bootstrap accordions, but glyphicon-chevrons not identified by ID, so change in tandem, not individually, as desired.

by Harsh Bhatnagar

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="OrderPackages">
  <table id="tableSearchResults" class="table table-hover  table-striped table-condensed">
    <thead>
      <tr>
        <th>Package ID</th>
        <th>Quantity</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
        <td>123456</td>
        <td>3</td>
        <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>

        </td>
      </tr>
      <tr>
        <td colspan="3" class="hiddenRow">
          <div class="accordion-body collapse packageDetails1" id="accordion1">
            <table>
              <tr>
                <td>Revealed item 1</td>
              </tr>
              <tr>
                <td>Revealed item 2</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr id="package2" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails2">
        <td>654321</td>
        <td>2</td>
        <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>

        </td>
      </tr>
      <tr>
        <td colspan="3" class="hiddenRow">
          <div class="accordion-body collapse packageDetails2" id="accordion2">
            <table>
              <tr>
                <td>Revealed item 1</td>
              </tr>
              <tr>
                <td>Revealed item 2</td>
              </tr>
              <tr>
                <td>Revealed item 3</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr></tr>
    </tbody>
  </table>
</div>

JavaScript

$('#accordion1').on('shown.bs.collapse', function() {
  $("#package1 i.indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('#accordion1').on('hidden.bs.collapse', function() {
  $("#package1 i.indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

$('#accordion2').on('shown.bs.collapse', function() {
  $("#package2 i.indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('#accordion2').on('hidden.bs.collapse', function() {
  $("#package2 i.indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});