Change glyphicon with class.onclick

Question

I'm wondering how I can change bootstrap glyphicon when I click over my HTML button.

This is my button :

<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
                    aria-expanded="false" aria-controls="title">
              <span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>

And this is my JavaScript part :

<script>
  $(document).ready(function () {
    $('.button-choice').click(function () {
      $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
    });
  });
</script>

I don't overcome to click on button and change glyphicon inside.

Answer 1

Your code seems to be the right way to make it. However, you are listening the click event on the wrong class :

$(".button-choice") 

Instead of

$(".btn-choice")

EDIT :

You should also find your span into your button. One more thing, you can toggle multiple classes with one toggleClass() call :

$(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");

Answer 2

First, you have a typo ( .button-choice instead of .btn-choice ).

Then, you need to find the closest span and update it, otherwise the class will be applied to the button instead of the inner span , and won't work as intended.

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<button class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title"
                    aria-expanded="false" aria-controls="title">
              <span class="glyphicon glyphicon-chevron-down"></span> {% trans 'Title' %} </button>

js:

$('.btn-choice').click(function () {
  $(this).find('span').toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
        //^----------^---- Note this! otherwise it won't work, since it would target $(this), which is the button.
});

Your fiddle, updated: https://jsfiddle.net/6ae0c1dL/2/

Answer 3

I'd use an id to get the span containing the glyphicon. That id being unique in the page, this solution works only for 1 button. A workaround to this can be using some data-something to call the correct span.

Plus, you aren't calling the correct class for the button.

 $(document).ready(function () { $('.btn-choice').click(function () { let spanId = $(this).data("spanid"); $('#' + spanId).toggleClass("glyphicon-chevron-down glyphicon-chevron-up"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <button data-spanid="theGlyphicon1" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title"> <span id="theGlyphicon1" class="glyphicon glyphicon-chevron-down"></span>my button 1 </button> <button data-spanid="theGlyphicon2" class="btn btn-default btn-choice" type="button" data-toggle="collapse" data-target="#title" aria-expanded="false" aria-controls="title"> <span id="theGlyphicon2" class="glyphicon glyphicon-chevron-down"></span>my button 2 </button>