بهینه سازی تابع برای چندین addclass removeclass

[hrmoridi]

سلام دوستان
من این کد رو نوشتم و کار میکنه ولی میخوام یه کد تر و تمیز با فانکشن داشته باشم
به نظر شما راهی هست برای اینکار؟



<!-- start mobile menu system -->
<section id="mobile-nav-system">
<div class="mobile-menu-div">
...
</div>
<!-- end mobile menu div -->
<div class="mobile-products-div">
...
</div>
<!-- end mobile products div -->
<div class="mobile-filter-div">
...
</div>
<!-- end mobile filter div -->
<div class="mobile-search-div">
...
</div>
<!-- end mobile search div -->
<div class="mobile-navbar">
<button id="open-mobile-menu-div" class="mobile-navbar-btn">
<i class="lnr-menu" id="open-menu-i"></i>
<span class="open-menu-span">منو</span>
</button>
<button id="open-mobile-products-div" class="mobile-navbar-btn">
<i class="lnr-layers" id="open-products-i"></i>
<span class="open-products-span">محصولات</span>
</button>
<button id="open-mobile-filter-div" class="mobile-navbar-btn">
<i class="lnr-funnel" id="open-filter-i"></i>
<span class="open-filter-span">فیلتر</span>
</button>
<button id="open-mobile-search-div" class="mobile-navbar-btn">
<i class="lnr-magnifier" id="open-search-i"></i>
<span class="open-search-span">جستجو</span>
</button>
<button style="clear: both;"></button>
</>
<!-- end mobile navbar -->
</section>
<!-- end mobile menu system -->



// <!-- mobile navigation system -->
$("#open-mobile-menu-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').toggleClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-menu-i').toggleClass('lnr-menu lnr-cross');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-funnel');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-menu-span').toggle();
$('.open-filter-span').show();
$('.open-products-span').show();
$('.open-search-span').show();
});
$("#open-mobile-products-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').toggleClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-products-i').toggleClass('lnr-layers lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-funnel');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-products-span').toggle();
$('.open-menu-span').show();
$('.open-filter-span').show();
$('.open-search-span').show();
});
$("#open-mobile-filter-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').toggleClass('show');
$('.mobile-search-div').removeClass('show');
$('#open-filter-i').toggleClass('lnr-funnel lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-search-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-filter-span').toggle();
$('.open-menu-span').show();
$('.open-products-span').show();
$('.open-search-span').show();
});
$("#open-mobile-search-div").click(function (e) {
e.preventDefault();
$('.mobile-menu-div').removeClass('show');
$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').removeClass('show');
$('.mobile-search-div').toggleClass('show');
$('#open-search-i').toggleClass('lnr-magnifier lnr-cross');
$('#open-menu-i').removeClass('lnr-cross').addClass('lnr-menu');
$('#open-products-i').removeClass('lnr-cross').addClass('lnr-layers');
$('#open-filter-i').removeClass('lnr-cross').addClass('lnr-magnifier');
$('.open-filter-span').show();
$('.open-menu-span').show();
$('.open-products-span').show();
$('.open-search-span').toggle();
});
// <!-- mobile navigation system -->


با تشکر

[pary2017]

میخوای چکار کنی دقیق
برای اینایی که دوبار نوشتی لازم نیست دوبار بنویسی

$('.mobile-products-div').removeClass('show');
$('.mobile-filter-div').removeClass('show');
میتونتس با یبار نوشتن بنویسی
$('.mobile-products-divو .mobile-filter-div').removeClass('show');

[hrmoridi]

سلام دوست عزیز
واقعا از توجه ت ممنونم
یه منوی موبایل طراحی کرده بودم ولی اصلا موقع طراحی انگار مغزم هنگ کرده بود
چون به این همه کد نیازی نبود
میتونستم با یه tab css3 ساده هم این کار رو بکنم
وقتی این پست رو اینجا گذاشتم یادم افتاد :لبخند:

تو w3schools هم خیلی ساده توضیح داده ولی من اصلا یادم رفته بود کلا

https://www.w3schools.com/howto/howto_js_tabs.asp

باز هم ممنون :قلب::قلب: