CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapfont-awesome
DeA
DeA

Reputation: 1918

How to toggle font-awesome icons inside bootstrap with jquery?

I have a bootstrap accordion in my template and a font awesome fa fa-angle-double-right that. How do I toggle this on expand and collapse? Change to fa fa-angle-double-down on expand and change to fa fa-angle-double-right on hide

This is my template:

<form action="." method="post">{% csrf_token %}
    {% include 'partials/form_field.html' with field=form.title %}
    {% include 'partials/form_field.html' with field=form.body %}
    {% include 'partials/form_field.html' with field=form.score %}

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#respond"aria-expanded="true" aria-controls="respond">
          Click to respond to this review <span class="fa fa-angle-double-right"></span>
        </a>
      </h4>
    </div>
    <div id="respond" class="panel-collapse collapse {% if review.responder_name and review.response %}in{%endif %}" role="tabpanel" aria-labelledby="response">
      <div class="panel-body">
          {% include 'partials/form_field.html' with field=form.responder_name %}
          {% include 'partials/form_field.html' with field=form.response %}
      </div>
    </div>
  </div>
 </div>
 <a href="{% url 'backend_reviews' %}" class="btn btn-default">Cancel</a>
 <input type="submit" class="btn btn-primary" value="Update Review" />
 <a href="{% url 'backend_reviews_delete' review.pk %}" class="btn btn-warning pull-right">Delete Review</a>
 </form>

Upvotes: 1

Views: 1823

Answers (2)

Marco Salerno
Marco Salerno

Reputation: 5201

Here we go:

$(".fa-angle-double-right").click(function(){
    $(this).attr('class', 'fa fa-angle-double-down');
});

Edit for changed question:

HTML

<span id="angle" class="fa fa-angle-double-right"></span>

Javascript with JQuery

$("#angle").click(function(){
    if($(this).attr('class') == "fa fa-angle-double-right"){
        $(this).attr('class', 'fa fa-angle-double-down');
    }
    else{
        $(this).attr('class', 'fa fa-angle-double-right');    
    }   
});

Upvotes: 1

Rahi
Rahi

Reputation: 1485

    var toggled = false;
    $('a[role="button"]').click(function(){
        if(toggled == false){
           $(this).find('span').addClass('fa fa-angle-double-down').removeClass('fa fa-angle-double-right');
           toggled = true;
        }else{
           $(this).find('span').addClass('fa fa-angle-double-right').removeClass('fa fa-angle-double-down');
           toggled  = false;
        }
    });

Another way can be... 

$('a[role="button"]').click(function(){
$(this).find('span').toggleClass('fa-angle-double-down fa-angle-double-right');
});

Upvotes: 0

Related Questions