[Answered ]-How to toggle glyphicon icon on toggle of a span in django templates

by

2👍

✅

see this he working code here.

and you have also pass the wrong class name to event.

  $(document).ready(function(e) {
    $('.parentDiv').click(function() {

      var toggle_sign = $(this).find(".toggle_sign");
      if ($(toggle_sign).hasClass("glyphicon-chevron-down")) {
        $(toggle_sign).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
      } else {
        $(toggle_sign).addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up");
      }
      // or toggle event you can use.
      //$(toggle_sign).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    });
  });
.parentDiv {
  width: 100%;
  background: cyan;
  height: 50px;
  border:1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <span class="toggle_sign glyphicon glyphicon-chevron-down"></span>
</div>
<div class="parentDiv">
  <span class="toggle_sign glyphicon glyphicon-chevron-down"></span>
</div>

Hope so this will help you a lot

👤Pratik Bhajankar

Leave a comment