This is a menu with a collapsing feature. I would like to change the right side icon when expanding the menu.
In order to achieve this, I need to add
<i class="fa fa-caret-down pull-right"></i>fa-caret-down icon and switch it to fa-caret-up upon clicking.
.category-list {
width="100px";
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="category-list" id="category-list">
<div class="list-name" data-toggle="collapse" data-target="#all">All
<i class="fa fa-caret-down pull-right"></i>
</div>
<ul id="all" class="collapse">
<li><a href="">Test1</a>
</li>
<li><a href="">Test2</a>
</li>
<li><a href="">Test3</a>
</li>
</ul>
<div class="list-name" data-toggle="collapse" data-target="#nxt">Next
<i class="fa fa-caret-down pull-right"></i>
</div>
<ul id="nxt" class="collapse">
<li><a href="">Test1</a>
</li>
<li><a href="">Test2</a>
</li>
<li><a href="">Test3</a>
</li>
</ul>
</div>
</div>
</div>
</div>