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 }
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> 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> 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> form</a> </li> <li class="nav-divider"></li> <li><a href="#">status</a> </li> <li><a href="#"><span class="glyphicon glyphicon-ok"></span> approved</a> </li> <li><a href="#"><span class="glyphicon glyphicon-remove"></span> rejected</a> </li> <li><a href="#"><span class="glyphicon glyphicon-refresh"></span> 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> search</a> </li> </ul> </div>
Comments
Post a Comment