Плавное переключение в JS по DIV блокам

$('.tabs .btn').click( 
  function() { 
    var a = $(this).siblings('.text'); 
    if (a.hasClass('active')) { 
      a.removeClass('active'); 
      a.hide("fast"); 
    } else { 
      var b = $(this).parent().parent().children().children('.active'); 
      b.removeClass('active'); 
      b.hide('fast'); 
      a.addClass('active'); 
      a.show("fast"); 
    } 
  } 
); 
$('.active').show("fast");

* { 
  box-sizing: border-box; 
} 
 
 
/* 360-23 */ 
 
.container { 
  max-width: 960px; 
  margin: 1rem auto; 
} 
 
.btn { 
  display: inline-block; 
  padding: .5rem 1.5rem; 
  border: 1px solid black; 
  border-radius: 5px; 
  cursor: pointer; 
  line-height: 1; 
  vertical-align: middle; 
} 
 
.text { 
display:none; 
} 
 
.active { 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
 
 
  <div class="tabs"> 
 
    <div class="tab"> 
      <p class="btn">Подробнее</p> 
      <div class="text active"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla metus. Nam rutrum volutpat eros, vitae porta urna faucibus ut. Mauris lacinia nisi lectus, aliquam placerat elit aliquam vitae. Donec ultricies nisl in ex vehicula, ac ornare elit 
        consequat. Fusce est metus, sagittis ac ultrices in, porttitor et sapien. Nam quis felis sit amet dolor ultrices interdum. Sed pellentesque velit id eros ornare porttitor. Etiam venenatis ex non orci tempor, ac egestas velit maximus. 
      </div> 
    </div> 
 
    <div class="tab"> 
      <p class="btn">Подробнее</p> 
      <div class="text"> 
        Curabitur semper tincidunt tellus. Integer felis sapien, feugiat vitae nunc et, auctor aliquam tellus. Maecenas volutpat turpis nec arcu finibus, sed elementum ipsum dapibus. Aliquam pharetra finibus lectus, id pharetra justo convallis non. Cras accumsan 
        feugiat ligula placerat venenatis. Ut convallis purus ornare eros interdum malesuada. Vivamus enim sapien, venenatis et finibus vel, venenatis vel mauris. Sed sagittis lorem non mollis dignissim. Aliquam lacus lectus, faucibus in felis ut, tempus 
        malesuada dolor. Proin sed urna non augue sodales mollis. 
      </div> 
    </div> 
 
    <div class="tab"> 
      <p class="btn">Подробнее</p> 
      <div class="text"> 
        Quisque sit amet nunc leo. Vivamus mauris justo, sagittis vel posuere non, dictum vel massa. Quisque rhoncus cursus ex et vestibulum. Suspendisse sit amet laoreet ante, eu fermentum arcu. Mauris augue nisl, ornare sit amet lacinia vel, varius vel purus. 
        Nullam ac massa id nibh gravida fringilla. Nam euismod ultricies velit. Cras commodo vel urna in ullamcorper. Phasellus sagittis quam et orci lacinia, hendrerit pretium tortor pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
        In tincidunt urna in tristique interdum. Etiam sit amet dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac libero ultricies, sagittis sem eget, dignissim urna. 
      </div> 
    </div> 
 
  </div> 
 
 
</div>

    $(window).on('load', function () { 
        $('.text').hide(); 
        $('.tabs .btn').on('click',function () { 
            $('.text').hide(); 
            $(this).parent().children('.text').show(3000); 
            var z = $(this).parent().children('.text').show(); 
            z.toggleClass('.active'); 
 
        }) 
 
    });

    * { 
        box-sizing: border-box; 
    } 
 
 
    /* 360-23 */ 
 
    .container { 
        max-width: 960px; 
        margin: 1rem auto; 
    } 
 
    .btn { 
        display: inline-block; 
        padding: .5rem 1.5rem; 
        border: 1px solid black; 
        border-radius: 5px; 
        cursor: pointer; 
        line-height: 1; 
        vertical-align: middle; 
    } 
 
    .text { 
        opacity: 1; 
    } 
 
    .text.active { 
        opacity: 1; 
        transition: 3s; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
 
 
    <div class="tabs"> 
 
        <div class="tab"> 
            <p class="btn">Подробнее</p> 
            <div class="text"> 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla metus. Nam rutrum volutpat eros, vitae porta urna faucibus ut. Mauris lacinia nisi lectus, aliquam placerat elit aliquam vitae. Donec ultricies nisl in ex vehicula, ac ornare elit 
                consequat. Fusce est metus, sagittis ac ultrices in, porttitor et sapien. Nam quis felis sit amet dolor ultrices interdum. Sed pellentesque velit id eros ornare porttitor. Etiam venenatis ex non orci tempor, ac egestas velit maximus. 
            </div> 
        </div> 
 
        <div class="tab"> 
            <p class="btn">Подробнее</p> 
            <div class="text"> 
                Curabitur semper tincidunt tellus. Integer felis sapien, feugiat vitae nunc et, auctor aliquam tellus. Maecenas volutpat turpis nec arcu finibus, sed elementum ipsum dapibus. Aliquam pharetra finibus lectus, id pharetra justo convallis non. Cras accumsan 
                feugiat ligula placerat venenatis. Ut convallis purus ornare eros interdum malesuada. Vivamus enim sapien, venenatis et finibus vel, venenatis vel mauris. Sed sagittis lorem non mollis dignissim. Aliquam lacus lectus, faucibus in felis ut, tempus 
                malesuada dolor. Proin sed urna non augue sodales mollis. 
            </div> 
        </div> 
 
        <div class="tab"> 
            <p class="btn">Подробнее</p> 
            <div class="text"> 
                Quisque sit amet nunc leo. Vivamus mauris justo, sagittis vel posuere non, dictum vel massa. Quisque rhoncus cursus ex et vestibulum. Suspendisse sit amet laoreet ante, eu fermentum arcu. Mauris augue nisl, ornare sit amet lacinia vel, varius vel purus. 
                Nullam ac massa id nibh gravida fringilla. Nam euismod ultricies velit. Cras commodo vel urna in ullamcorper. Phasellus sagittis quam et orci lacinia, hendrerit pretium tortor pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
                In tincidunt urna in tristique interdum. Etiam sit amet dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac libero ultricies, sagittis sem eget, dignissim urna. 
            </div> 
        </div> 
 
    </div> 
 
 
</div>