Нужна помощь убрать класс visible у ul, в то время когда другому ul добавляется класс visible?

Question

[Виктор Полторацкий]

<div class="tab__item active-tab" id="1">
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">FEATURED</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Pfg Fishing Gear</a></li>
                <li><a href="#">Rainwear</a></li>
                <li><a href="#">Titanium Collection</a></li>
                <li><a href="#">Golf Apparel</a></li>
                <li><a href="#">Exclusives</a></li>
                <li><a href="#">Collegiate Gear</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">JACKETS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Fleece</a></li>
                <li><a href="#">Ski & Snowboard</a></li>
                <li><a href="#">Soft Shell</a></li>
                <li><a href="#">Rain</a></li>
                <li><a href="#">Windbreakers</a></li>
                <li><a href="#">Hard Shell</a></li>
                <li><a href="#">Vests</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">TOPS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Sweatshirts & Hoodies</a></li>
                <li><a href="#">Button Down</a></li>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Baselayer</a></li>
                <li><a href="#">Polos</a></li>
                <li><a href="#">Hiking & Active</a></li>
                <li><a href="#">Fishing</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">BOTTOMS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Shorts</a></li>
                <li><a href="#">Hiking & Active</a></li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Rain</a></li>
                <li><a href="#">Ski & Snowboard</a></li>
                <li><a href="#">Baselayer</a></li>
                <li><a href="#">Fishing</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">SHOES</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Boots</a></li>
                <li><a href="#">Hiking</a></li>
                <li><a href="#">Trail Running</a></li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Water & Boat</a></li>
                <li><a href="#">Sandals</a></li>
                <li><a href="#">Wide Sizes</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">ACCESSORIES</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Hats</a></li>
                <li><a href="#">Scarves & Neck Gaiters</a></li>
                <li><a href="#">Gloves & Mittens</a></li>
                <li><a href="#">Leather Wallets & Belts</a></li>
                <li><a href="#">Sunglasses</a></li>
                <li><a href="#">Socks</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">EQUIPMENT</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Backpacks & Bags</a></li>
                <li><a href="#">Coolers</a></li>
                <li><a href="#">Duffels & Rollers</a></li>
                <li><a href="#">Tents</a></li>
                <li><a href="#">Water Bottles</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">BIG & TALL</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Jackets & Vests</a></li>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Bottoms</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">SALE</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Jackets & Vests</a></li>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Bottoms</a></li>
                <li><a href="#">Big & Tall</a></li>
                <li><a href="#">Footwear</a></li>
                <li><a href="#">Accessories</a></li>
               </ul>
              </div>
              <div class="tab__item-promo" style="background-image: url(images/content/banner-promo-bg.jpg);">
               <div class="tab__item-promo-title">Get ready for Snowboarding</div>
               <div class="tab__item-promo-btn"><a href="#">Let’s shred</a></div>
              </div>
             </div>

Дело в том ,что я меняю класс с avtive на visible но чтоб только один ul мог быть под классом visible, т.е когда я жму на первый ul а следом на второй ,у первого менялся класс на active

Вот мой недоработанный js code

$(".tab__item-title a").click(function() {
 $(this).closest('.tab__item-list').find('.tab__item-categories').removeClass('active');
 $(this).closest('.tab__item-list').find('.tab__item-categories').addClass('visible')
});

Answer 1

[Алексей Гудырин]

.active{display: block;}
.visible{display:none;}

<script>	
	$('.tab__item-title').on("click",function (event) {
		if($(this).next().hasClass('active')){$(this).next().removeClass('active').addClass('visible');}
		else if($(this).next().hasClass('visible')){$(this).next().removeClass('visible').addClass('active');}
});
</script>

Comments

[Виктор Полторацкий]

Спасибо огромное!

Answer 2

[Владимир Рыжов]

Такое что-ли?

$(".tab__item-title a").click(function() {
   $('.tab__item-categories').removeClass('visible').addClass('active');
   $(this).closest('.tab__item-categories').removeClass('active').addClass('visible');
});

Comments

[Виктор Полторацкий]

Не совсем,при таком раскладе,у всех ul меняется класс,а мне нужно чтоб менялся у нажатого

[Владимир Рыжов]

Виктор Полторацкий, в моем коде у всех сохраняется класс active, и только у нажатого ставится класс visible. В вашем вопросе вроде про это и шла речь