Change font-awesome arrow submenu

Question

I would like to change the font-awesome to fa-angle-down on submenu opened and put back fa-angle-left on submenu collapsed.

HTML and CSS:

.sidenav li .arrow:before {
    font-size: 1.4em;
    padding-left: 10px;
    padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
    <a href="#/"><i class="fa fa-tasks fa-fw"></i> External Tools <span class="arrow pull-right fa fa-angle-left"></span></a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
    <li><a href="">First tool</a></li>
    <li><a href="">Second Tool</a></li>
</ul>

How to? Should it be in CSS or in jQuery?

Answer 1

You could use a transform paired with a transition. This will create a nicer effect than using JS to simply replace .fa-angle-left with .fa-angle-down.

.sidenav li .arrow {
  transition: transform .25s;
}

.sidenav li.collapsed .arrow {
  transform: rotate(90deg);
}

Have a look at this pen: http://codepen.io/ptrkcsk/pen/PbGbXW