JQuery/JS onclick change class of element inside link clicked

Question

I have a couple of drop downs using bootstrap and I want to code in a simple function to change the class of my span element inside the link that is clicked.

To clarify... Here's an example of the HTML I have:

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
    onclick="toggleIcon()">
    <span class="glyphicon glyphicon-knight"></span>
    Drop Down Title
    <span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
   <!-- content -->
</div>

I am looking for a function (using JS or JQuery ) which can toggle the second span class to change between glyphicon glyphicon-triangle-bottom and glyphicon glyphicon-triangle-top .

Bear in mind, this function has to work for multiple drop-downs. Any help would be much appreciated.

Answer 1

$('a[data-toggle="collapse"]').click(function() {
  $(this)
    .find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
    .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});

Also remove onclick="toggleIcon()"

This should work for all anchor tags that have data-toggle="collapse" attribute.

Answer 2

Fairly straightforward - better to use a $.click() function and get your classes right:

<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>

What I did up here was add the class of toggle-icon to the top link, and the class of icon-toggle to the span of the glyphicon...the JS is as follows:

// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})

Annotations added so you can read the code better. Hope this helps!

https://jsfiddle.net/khxehd05/

Answer 3

 $(function(){ $('#checkcls').click(function(){ if($('#tglcls').hasClass('glyphicon-triangle-bottom')){ $('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); //to check class alert($("#tglcls").attr('class')); } else{ $('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top'); //to check class alert($("#tglcls").attr('class')); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'> <span class="glyphicon glyphicon-knight"></span> Drop Down Title <span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span> </a> <div class="collapse" id="collapse-panel"> <!-- content --> </div>

Hope it helps you.

Answer 4

So far answers here I would consider just mildly-ok (in my humble opinion). Take a moment and read:

Decoupling Your HTML, CSS, and JavaScript

I would change a few things to make it look really readable and maintainable:

Html:

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
  <span class="glyphicon glyphicon-knight"></span>
  Drop Down Title
  <span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
  <span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
 <!-- content -->
</div>

css:

[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
  display: none;
}

[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
  display: none;
}

Working JsFiddle Example

1. I highly recommend you avoid at all costs using inline functions. ( onclick="toggleIcon()" )
2. Take advantage of CSS and what Bootstrap already does by simply writing html and css only!
3. Completely reusable, doesn't care what glyphs you use, doesn't require javascript, nothing is hard-coded in terms of events nor classes.