Change glyphicon with class.onclick

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.

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/

Bootstrap Glyphicons, 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  Jquery - Change Glyphicon on click. Ask Question Asked 4 years, 6 months ago. Active 4 years, 6 months ago. Viewed 1k times 0. I have a collapsing div and cannot seem

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

Change value of bootstrap button onclick, Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Example. <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> Here is a very easy way of doing that $(function { $(".glyphicon").unbind('click'); $(".glyphicon").click(function (e) { $(this).toggleClass("glyphicon glyphicon

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>

Bootstrap Snippet: Change button text & icon on click, in my html I got Bootstrap glyphicons with the following code: <span class="​glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;"> </span> is it  ROHITJGC How can I put a search glyphicon on an asp.net button. if possible try changing your button control to linkbutton and then assign the glyphicon like below

glyphicon-remove click event not working, Fold All; Unfold All. 3. 1. <button id="swapFire" class="btn btn-primary showFire">​. 2. <span class="glyphicon glyphicon-fire"></span> Gimme Fire. 3. </button>. Select your country and confirm the redirect to your country site. By clicking “Go” you agree to save information in the browser and automatic redirections. - Denmark Canada Germany Finland Norway Sweden Poland.

[Solved] I Want To Change Fa Icon Class On Click Of Button , I Dont , i have div like below into main div var div= '<div class="glyphicon ="https://​stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"  Hi, Is there anyway of applying a bootstrap glyphicon to a jquery ui button? My current code for adding a button to our viewer toolbar is: function AddEmailButton() { jquery ui button with glyphicon - is it possible? - jQuery Forum

EasyButton Demo, Hide Copy Code. $("button").click(function(){ $(this).find("i").removeClass("fa-star-​o").addClass("fa-truck"); }); Or maybe you can toggle it:.

Comments
  • Not an answer, but you can write your third line like this: $(this).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");.
  • Thank you it makes exactly what I want ! :)
  • You're right, it was a mistake from myself, but look @briosheje answer, with yours, it doesn't work ;)
  • Oops. Edited. Also I added a more dry code. Thanks for your feedback
  • Worth mentioning that using an id this approach will work as expected as long as the button set exists only once in the whole page.
  • This was implicit to me, but indeed, it's not necessary implicit for others.
  • $(this).find('span') seems to be a better approach than using id.
  • I disagree with you @AndréDS For some reasons, there can be many span in that button, at any places.
  • Then he can combine both of our solutions : $(this).find("span#id") ;)