Ekstra eklenti kullanmadan HTML&CSS kullanarak yapmak mümkün. Sadece jQuery ile tıklanıp tıklanmadığını kontrol etmeliyiz.

Demo: Gitmek için tıklayın

<div class="box">
  <div class="title">Bu sayfa için ilgili aramalar</div>
  <ul class="list">
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li id="open">
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </li>
  </ul>
  
</div>

.box {
  border:1px solid #ddd;
  padding:16px;
  width:500px;
  margin:0 auto;
  position:relative
}

.box ul {
  overflow:hidden;
  max-height:30px;
  transition:all 0.5s;
  position:relative;
  margin:10px 0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap
}

.box ul.active {
  max-height:500px;
  padding-bottom:30px;
}

.box ul::after {
  content:"";
  background:linear-gradient(to bottom,transparent 30%,#fff 100%);
  z-index:4;
  height:30px;
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  display:flex
}

.box ul li {
  width:50%
}
.box ul #open {
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  height:20px;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  cursor:pointer;
  transition:all 0.5s;
  width:30px;
}
.box ul.active #open{
  transform:rotate(180deg);
  margin-left:-15px;
}

$("#open").click(function(){
  var ul = $(this).closest("ul");
  if(ul.hasClass("active")){
    ul.removeClass("active");
  }else{
    ul.addClass("active");
  }
})