javascript - Change chevron on click event -


i want change chevron down up based on user's onclick event. i've tried using other samples other people not work out.

this jsfiddle.

well, have couple of problems setup of jsfiddle, i'm assuming secondary actual problem.

the easiest way use .toggleclass() (i'm assuming you're okay using jquery since use $(document).ready() , include in fiddle).

you can use (classname, switch) signature add or remove classes:

 $(element).toggleclass("myclass", false) // removes myclass  $(element).toggleclass("myotherclass", true) // adds myotherclass 

so, if add var change = true in .ready(), can switch between 2 glyphicons on each click:

function toggle_caret() {     $("#caret1").toggleclass("glyphicon-chevron-up", change);     $("#caret1").toggleclass("glyphicon-chevron-down", !change);     change = !change } 

demo

var change = true;  $(document).ready(function () {      $('[data-toggle=offcanvas]').click(function () {          $('.row-offcanvas').toggleclass('active');      });  });    function toggle_caret() {      $("#caret1").toggleclass("glyphicon-chevron-up", change);      $("#caret1").toggleclass("glyphicon-chevron-down", !change);      change = !change  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  <div class="container-fluid">      <div class="row">          <div class="col-sm-3 col-md-2 sidebar">              <ul class="nav nav-sidebar">                  <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;dashboard<span class="sr-only">(current)</span></a>                  </li>                  <li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>                  </li>                  <ul class="nav collapse" id="sub1">                      <li><a href="#"><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;form</a>                      </li>                      <li class="nav-divider"></li>                      <li><a href="#">status</a>                      </li>                      <li><a href="#"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;approved</a>                      </li>                      <li><a href="#"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;rejected</a>                      </li>                      <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;in process</a>                      </li>                  </ul>              </ul>              <ul class="nav nav-sidebar">                  <li class="nav-divider"></li>                  <li><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;search</a>                  </li>              </ul>          </div>


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -