CODEWITHSUNDEEP
javascripttwitter-bootstraponclicktoggleclass
Athirah Hazira
Athirah Hazira

Reputation: 473

Change chevron on click event

I want to change the chevron from down to up based on user's onClick event. I've tried using other samples by other people but it does not work out.

This is my JSFiddle.

Upvotes: 0

Views: 3274

Answers (1)

AstroCB
AstroCB

Reputation: 12367

Well, you have a couple of problems with the setup of your JSFiddle, but I'm assuming that those are secondary to your actual problem.

The easiest way to do this is to use .toggleClass() (I'm assuming you're okay with using jQuery since you use a $(document).ready() and include it in your Fiddle).

You can use the (className, switch) signature like this to add or remove classes:

 $(element).toggleClass("myClass", false) // Removes myClass
 $(element).toggleClass("myOtherClass", true) // Adds myOtherClass

So, if you add var change = true in your .ready(), you can do something like this to switch between the two 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>

Upvotes: 1

Related Questions