3

Хочу немного модифицировать этот скрипт, чтобы из активного элемента 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch_wr">
  <div class="switch">
    <span>Switch_1</span>
    <div>Some text switch tab 1</div>
  </div>
  <div class="switch">
    <span>Switch_2</span>
    <div>Some text switch tab 2</div>
  </div>
  <div class="switch">
    <span>Switch_3</span>
    <div>Some text switch tab 3</div>
  </div>
</div>
<div class="content_wr" style="margin-top: 30px;">
  <div class="content">some content 1</div>
  <div class="content">some content 2</div>
  <div class="content">some content 3</div>
</div>

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

Constantine Shibaev
  • 857

1 Answers1

5

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

 $('.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 );

Результат:

введите сюда описание изображения

Даниил
  • 3,443
  • Даниил, будь другом выложи весь код и опиши разницу, я JQ дружу и не понял куда этот кусок вставить. Просто для практики... – Air Nov 10 '17 at 21:50
  • @Air так лучше? – Даниил Nov 10 '17 at 21:55
  • Даниил, благодарю... Мне просто чужой код читать трудно, особенно JQ – Air Nov 10 '17 at 21:56
  • @Даниил Благодарю, отличное решение. – Constantine Shibaev Nov 10 '17 at 22:04
  • @ConstantineShibaev, ответ принял, спасибо сказал... Поставь, сделай добро поставь плюсик человеку....))) – Air Nov 10 '17 at 22:07
  • Рад что помог, и вам спасибо ) – Даниил Nov 10 '17 at 22:16