jquery [tabs] открыть и закрыть

Question

это мой первый вопрос о переполнении стека. Нужна помощь с вкладками. Теперь, когда я нажимаю один из h3-тегов, я открываю содержимое вкладки, но я хочу закрыть его при следующем нажатии на h3.

Извините за свои плохие навыки английского языка, надеюсь, вы все понимаете, что я имел в виду.

это мой HTML:

   <div class="sub-aside"> 
       <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
       <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
        <li><a href="#">Home Goods</a></li> 
        <li><a href="#">Cooking</a></li> 
       </ul> 
      </div> 
      <div class="sub-aside"> 
       <h3 class="sub-category" data-tab="tab-2">life events</h3> 
       <ul class="drop-content sub-content" id="tab-2"> 
        <li><a href="#">Anniversary</a></li> 
        <li><a href="#">Back to school</a></li> 
       </ul> 
      </div> 

и мой JQuery код:

$(".sub-category").on('click', function() { 
     var tab_id = $(this).attr('data-tab'); 

     $('.sub-category').removeClass('content-active'); 
     $('.sub-content').removeClass('content-active'); 

     $(this).addClass('content-active'); 
     $("#"+tab_id).addClass('content-active'); 

     $('.sub-category').toggleClass('content-active'); 
    }) 

Answer 1

Вы можете использовать toggle.

$(".sub-category").on('click', function() { 
$(this).next('ul').toggle();  
}) 

$(".sub-category").on('click', function() { 
 
//Toggle particular element 
 
$(this).next('ul').toggle();  
 
//Hide all the elements not the clicked one 
 
$(".sub-category").next('ul').not($(this).next('ul')).hide(); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-aside"> 
 
       <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
 
       <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
 
        <li><a href="#">Home Goods</a></li> 
 
        <li><a href="#">Cooking</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="sub-aside"> 
 
       <h3 class="sub-category" data-tab="tab-2">life events</h3> 
 
       <ul class="drop-content sub-content" id="tab-2"> 
 
        <li><a href="#">Anniversary</a></li> 
 
        <li><a href="#">Back to school</a></li> 
 
       </ul> 
 
      </div>

Answer 2

Использование slideToggle для лучшего эффекта

Jquery

$(document).ready(function() { 
    $(".sub-category").on('click', function() { 
    $(this).next('ul').slideToggle();  
    }) 
}); 

Html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sub-aside"> 
      <h3 class="sub-category" data-tab="tab-1">shopping communities</h3> 
      <ul class="first-side-menu drop-content sub-content" id="tab-1"> 
       <li><a href="#">Home Goods</a></li> 
       <li><a href="#">Cooking</a></li> 
      </ul> 
     </div> 
     <div class="sub-aside"> 
      <h3 class="sub-category" data-tab="tab-2">life events</h3> 
      <ul class="drop-content sub-content" id="tab-2"> 
       <li><a href="#">Anniversary</a></li> 
       <li><a href="#">Back to school</a></li> 
      </ul> 
     </div> 

проверить его на JsFiddle