Other people will be looking at this jquery code and i'm not an expert with jQuery so im asking. How can i make this jQuery code shorter, more efficient, and easier to read? /* HEADER NAVIGATION *//* navigation tabs click highlight */$(.header-main-tabs).click(function() {$(.header-main-tabs).removeClass(header-tab-selected);$(this).addClass(header-tab-selected);});/* drop menu hide and show for desktop */$(.header-main-tabs).hover(function() {$(this).children(.header-drop-menu).toggleClass(show-drop-menu-hover);});/* search input hide and show when search icon is pressed */$(#search-icon-container span).click(function() {$(this).toggleClass(fa-times);$(#search-input-container).fadeToggle(fast);});/* mobile navigation *//* show mobile tabs when toggle nav mobile button is clicked and when browser width is      over 990px *//* toggle mobile navigation when nav button is clicked */$(#toggle-mobile-nav).click(function() {$(#nav-tabs-list).slideToggle();$(#toggle-mobile-nav).toggleClass(toggle-mobile-nav-clicked);});var browserWidth = $(window).width();$(window).resize(function() {browserWidth = $(window).width();if (browserWidth > 990) {    $(#nav-tabs-list).show();} });$('#nav-tabs-list li').click(function() {if (browserWidth <= 990) {    $('#nav-tabs-list').slideUp();}});/* always show drop menu when on mobile version (when browser width is below 960px) */$(document).ready(function() { fadeMobile();  });$(window).resize(function() {   fadeMobile();  });function fadeMobile() {  browserWidth = $(window).width();   if (browserWidth < 990) { $(#nav-tabs-list).hide();    $('.header-drop-menu').show();     $(#toggle-mobile-nav).removeClass(toggle-mobile-nav-clicked);      }    }
Window-size-dependent navigation menu with animation effects
javascript;jquery;animation