Change dropdown caret on click of other LI item

Question

I'm creating a website and having trouble with some carets on my dropdown.

I have a sidebar like so:

Home
Menu item >
Menu item 2 >
Menu item 3 >

When I click on a menu item the little caret icon goes from > to v and expands the dropdown content like so:

Home
Menu item v
  Sub-menu item
  Sub-menu item 2
Menu item 2 >
Menu item 3 >

If I click on Menu item v - the caret goes from v to > again which is correct.

However, if I click on Menu Item 2 > for example, menu item 2 opens, but the caret on menu item stays as v like so:

Home
Menu item v
Menu item 2 v
  Sub-menu item
  Sub-menu item 2
Menu item 3 >

How do I get it so when Menu item 2 has been clicked, menu item v will change back to menu item >

I have this as my JS

$('.dropdown').click(function(){
    $(this).find('.nav-arrow').toggleClass('fa-angle-left fa-angle-down');
});

$('.dropdown').click(function(){
    $('.collapse').collapse('hide');
})

My drop down looks like this:

Home

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item<i class="nav-arrow fa fa-angle-left pull-right"></i></a>
    <ul class="collapse">
        <li><a href="#">Sub menu item</li>
        <li><a href="#">Sub-menu item 2</a></li>
    </ul> 
</li>

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 2 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
    <ul class="collapse">
        <li><a href="#">Sub menu item</li>
        <li><a href="#">Sub-menu item 2</a></li>
    </ul> 
</li> 

<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 3 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
    <ul class="collapse">
        <li><a href="#">Sub menu item</li>
        <li><a href="#">Sub-menu item 2</a></li>
    </ul> 
</li> 

Answer 1

What you need to do is first convert all of the <li> elements to a left-facing caret, and then only change the target element back. Unfortunately, as there's no (simple) way to know which carets are open and which are closed, it's best to change them explicitly:

$('.dropdown').click(function(){
  $('.nav-arrow').removeClass('fa-angle-down');
  $('.nav-arrow').removeClass('fa-angle-left');
  $(this).find('.nav-arrow').removeClass('fa-angle-left');
  $(this).find('.nav-arrow').addClass('fa-angle-down');
});

Hope this helps!

Answer 2

I think this will handle the case where you have toggled a menu open and close and if you have toggled the menu by selecting another entry in the menu.

jQuery(".dropdown").click(function(event){
  // Evaluate the target of the click event was already opened.
  if(jQuery(event.target).hasClass("fa-angle-down")){
    // Change the caret to looks like they are closed.
    jQuery(event.target).removeClass("fa-angle-down").addClass("fa-angle-left");

  // Evaluate the target of click event was not opened. 
  }else{
    // Remove any opened menu items carets.
    jQuery(".dropdown.fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-left");
    // Add the appropriate caret to the newly opened menu item.
    jQuery(event.target).removeClass("fa-angle-left").addClass("fa-angle-down");
  }
});

Let me know if you have any questions or if I can improve on this to make it better for you.