Нужно совместить эффект аккордеона и табов в одном скрипте

#javascript #html #jquery #css #вёрстка

Хочу немного модифицировать этот скрипт, чтобы из активного элемента switch tab разворачивался
его контент, сейчас это работает не верно (раскрываются сразу все).

Делал решение на css с привязкой раскрытия к активному элементу, но даже с transition
раскрытие/скрытие выглядит не плавно, поэтому решил попробовать со слайдами.



$(".content").not(":first").hide();
$(".switch:first div").show();
$(".switch").click(function() {

  var sld = $(".switch div");

  $(".switch").removeClass("active").eq($(this).index()).addClass("active");
  $(".content").hide().eq($(this).index()).fadeIn();

  if ($(".switch").eq($(this).index()).hasClass("active")) {
    sld.slideDown();
  } else {
    sld.slideUp();
  }
}).eq(0).addClass("active");
.switch span {
  display: inline-block;
  font-family: Arial;
  font-size: 14px;
  padding: 5px;
  margin-bottom: 10px;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.switch div {
  display: none;
  font-family: Arial;
  font-size: 16px;
  padding: 5px 0;
}

.active span {
  color: red;
}


  

    Switch_1
    
Some text switch tab 1
  
  

    Switch_2
    
Some text switch tab 2
  
  

    Switch_3
    
Some text switch tab 3
  


  
some content 1
  
some content 2
  
some content 3





Подскажите что я делаю не так?
    

Ответы

Ответ 1

Можете вот так сделать: 

 $('.switch div').each(function( index ) {
   var sld = $(this); 
   sld.slideUp(); 
 });

 if ($(this).hasClass('active')) { 
   var sld = $(this).find('div'); 
   sld.slideDown(); 
 }


Полный код Jquery:

(function($) {
    $(".content").not(":first").hide();
    $(".switch:first div").show();
    $(".switch").click(function() {

    $(".switch").removeClass("active").eq($(this).index()).addClass("active");
        $(".content").hide().eq($(this).index()).fadeIn(); 

        $('.switch div').each(function( index ) {
            var sld = $(this); 
            sld.slideUp(); 
        });

        if ($(this).hasClass('active')) { 
            var sld = $(this).find('div'); 
            sld.slideDown(); 
        } 
    }).eq(0).addClass("active");
})( jQuery );



  Результат: