SOURCE

$('.item-title').click(function(){
  $(this).siblings('.item-content').toggleClass('active')
})

<div class="nav">
  <div class="nav-item">
    <div class="item-title">hello world</div>
    <ul class="item-content hide">
      <li>it is cold today</li>
      <li>it is cold today</li>
      <li>it is cold today</li>
      <li>it is cold today</li>
    </ul>
  </div>
    <div class="nav-item">
    <div class="item-title">hello world</div>
    <ul class="item-content hide">
      <li>it is cold today</li>
      <li>it is cold today</li>
      <li>it is cold today</li>
      <li>it is cold today</li>
    </ul>
  </div>
</div>

.item-title{
  cursor:pointer;
  background:greenyellow;
  width:200px;
}
.item-content.hide{
  height:0;
  overflow:hidden;
  transition:height .4s;
}
.item-content.active{
  height:84px;
}