Script to change glyphicon on Accordion Nav…

I have a Bootstrap 3 accordion nav which consists of multiple repeats of this code block [U]all with their own ids[/U] #tab1, tab2 etc…

<!– New/Used Machines Tab with Dropdowns–>
<a href=”#tab1″ class=”list-group-item list-group-item-success” data-toggle=”collapse” data-parent=”#MachineMenu”><span class=”glyphicon glyphicon-triangle-right”></span>CNC MILLING<span class=”label label-info pull-right machines_available”>5</span></a>
<div class=”collapse” id=”tab1″>
<a href=”#” class=”list-group-item pl40″>DRILLING &amp; BORING<span class=”label label-info pull-right machines_available”>5</span></a>
<a href=”#” class=”list-group-item pl40″>HORIZONTAL<span class=”label label-info pull-right machines_available”>5</span></a>
<a href=”#” class=”list-group-item pl40″>OTHER<span class=”label label-info pull-right machines_available”>5</span></a>
<a href=”#” class=”list-group-item pl40″>UNIVERSAL<span class=”label label-info pull-right machines_available”>5</span></a>
<a href=”#” class=”list-group-item pl40″>VERTICAL<span class=”label label-info pull-right machines_available”>5</span></a>
</div>
<!– New/Used Machines Tab with Dropdowns END–>

I’m using the following js :

<!– jQuery to Control Glyphicons in New/Used Machinery Menu –>
<script>
$(‘#MachineMenu’).on(‘shown.bs.collapse’, function() {
$(“.glyphicon”).removeClass(“glyphicon-triangle-right”).addClass(“glyphicon-triangle-bottom”);
});

$(‘#MachineMenu’).on(‘hidden.bs.collapse’, function() {
$(“.glyphicon”).removeClass(“glyphicon-triangle-bottom”).addClass(“glyphicon-triangle-right”);

});
</script>

The problem is that this is changing the state of ALL the glyphicons in the nav, not the SINGLE ONE that has been clicked ???

How do I make the js target ONLY the clicked nav ?

Also in #JavaScript _↴