title: How to change fa-angle-left to fa-angle-down when we click on list item in ul
body: <p>I have to change the fa-angle-left to fa-angle-down when we click on list item drop down in ul . Please refer below code.</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="nav nav-pills nav-stacked panel-group " id="accordion" data-spy="affix" data-offset-top="605"&gt;
          &lt;!--&lt;li class="active"&gt;&lt;a href="#section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#section3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;--&gt;
          &lt;li class="panel" style="margin-top: 0px"&gt;
              &lt;a href="javascript:;" data-toggle="collapse" data-target="#demo1" data-parent="#accordion" style="margin-left: 0px; margin-top:"&gt; &lt;i class="fa fa-calendar " style="margin-right:  10px;"&gt;&lt;/i&gt;Planning&lt;i class="fa fa-angle-left " style="float: right !important;"&gt;&lt;/i&gt; &lt;/a&gt;
              &lt;ul id="demo1" class="collapse "&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       YE
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Yearly&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       MO
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Monthly&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="panel" style="margin-top: 0px"&gt;
              &lt;a href="javascript:;" data-toggle="collapse" data-target="#demo2" data-parent="#accordion" style="margin-left: 0px; margin-top:"&gt; &lt;i class="fa fa-book " style="margin-right:  10px;"&gt;&lt;/i&gt;Order&lt;i class="fa fa-angle-left" style="float: right !important;"&gt;&lt;/i&gt; &lt;/a&gt;
              &lt;ul id="demo2" class="collapse " data-parent="#accordion"&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;"&gt;
                       AL
                    &lt;/span&gt;&lt;a ui-sref="dashboard"&gt;All&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       SE
                    &lt;/span&gt;&lt;a ui-sref="sector"&gt;Sector&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       DR
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Date Range&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       DE
                    &lt;/span&gt; &lt;a ui-sref=""&gt;Delivered&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       PE
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Pending&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="panel" style="margin-top: 0px"&gt;
              &lt;a href="javascript:;" data-toggle="collapse" data-target="#demo3" data-parent="#accordion" style="margin-left: 0px; margin-top:"&gt; &lt;i class="fa fa-truck" style="margin-right:  10px;"&gt;&lt;/i&gt;Logistics&lt;i class="fa fa-angle-left" style="float: right !important;"&gt;&lt;/i&gt; &lt;/a&gt;
              &lt;ul id="demo3" class="collapse" data-parent="#accordion"&gt;
                  &lt;li style="margin-left: 0px"&gt; &lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       AL
                    &lt;/span&gt;&lt;a ui-sref=""&gt;All&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       SE
                   &lt;/span&gt;&lt;a ui-sref=""&gt;Sector&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       CU
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Customer&lt;/a&gt;&lt;/li&gt;&lt;br&gt;
                  &lt;li style="margin-left: 0px"&gt;&lt;span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;"&gt;
                       PE
                    &lt;/span&gt;&lt;a ui-sref=""&gt;Pending&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="panel" style="margin-top: 0px"&gt;
              &lt;a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"&gt; &lt;i class="fa fa-truck" style="margin-right:  10px;"&gt;&lt;/i&gt;Delivery &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="panel" style="margin-top: 0px"&gt;
              &lt;a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"&gt; &lt;i class="fa fa-truck" style="margin-right:  10px;"&gt;&lt;/i&gt;Delivery &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Suggest me which changes i have to do to make this happen. 
  Please refer JsFiddle also <a href="https://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/" rel="nofollow noreferrer">https://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/</a></p>