slidetoggle

title.js

$('.btn').click(function(){
  $('.box').toggleClass('open');
});

title.css

.box{
  max-height:0;
  overflow:hidden;
  transition:max-height .2s ease;
}

.box.open{
  max-height:300px;
}

title.html

<div class="item">
  <button class="btn">タイトル</button>
  <div class="box">
    <div class="inner">
      内容がここに入ります。  
      テキストが増えても高さは自動です。
    </div>
  </div>
</div>

title.css

.box{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}

.box .inner{
  overflow:hidden;
}

.box.open{
  grid-template-rows:1fr;
}

title.js

$('.btn').click(function(){
  $(this).next('.box').toggleClass('open');
});

title.js

$('.btn').click(function(){

  if($(this).next('.box').hasClass('open')){
    $('.box').removeClass('open');
  }else{
    $('.box').removeClass('open');
    $(this).next('.box').addClass('open');
  }

});

slidetoggle

title.js

$('.btn').click(function(){

  var box = $(this).next('.box');

box.stop(true,true).slideToggle(150);

});