Modify menu to work with onclick event

Hello There,
Awesome theme, fulfill my requirements well..

Trying to modify a menu feature…spent a lot of time in it..but no luck.

I am just trying to modify the menu in a way that the functionality it is providing with “ontouchstart” event …like when we hover the menu item, if is having sub-menu then sub menus opens up….as we hover any other item the first one closes and the sub menus of that item opens up…just like accordion effect. I like this…but i need this for “onclick” event.

I have modified the code for it but not able to get completely what I want. My code is :

(function($){
  $(document).ready(function() {
    $('.toggle-sidebar').click(function() {
      $('.row-offcanvas').toggleClass('active');
    });

    $('.toggle-navigation').click(function() {
      $(this).toggleClass('open').next('#site-navigation').slideToggle(300);
    });

    $('#site-navigation .sub-menu').before('<i class="fa fa-caret-right"></i>');
    $('#site-navigation .children').before('<i class="fa fa-caret-right"></i>');

    if(!!('onclick' in window)){
      $('#site-navigation .menu-item-has-children .fa').click(function() {
        $(this).toggleClass('open').next('ul').slideToggle(300);
      });
    } else {
      $('#site-navigation .menu-item-has-children').not('.current-menu-parent').not('.current-menu-ancestor').hover(function() {
        $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).slideToggle(300);
      });
    }
  });
})(jQuery);

Fome the above code, menus are opening up with “onclick” but when we click on another li which is having sub-menu then the it opens up but the previous li is not closing.

I want this should work as accordion.

Please Help ASAP