複数項目の詳細表示 / 非表示を、JQuery5行で実装する ref: https://qiita.com/yu-smc/items/9bbd57f1e842eda20a18

css.stylesheet.css

.pulldown {
  width: 300px;
  margin: 0 0 10px 20px;
}

.pulldown-head {
  background-color: lightgreen;
  height: 40px;
}

.pulldown-body {
  display: none;
  background-color: lightgray;
  height: 200px;
}

file4.js

//data-slideがslide1の要素をクリックした時
$('.' + $(this).data('slide'))==$('slide1')

//data-slideがslide2の要素をクリックした時
$('.' + $(this).data('slide'))==$('slide2')

pulldown.html

<div class="pulldown-head" data-slide="slide1" data-fade="fade1">ここを押すと表示 / 非表示</div>
<div class="pulldown-body slide1">
  <p class="fade1">詳細部分をフェードイン / アウト</p>
</div>

pulldown.js

  $(function(){
    $('.pulldown-head').on('click', function(){
      $('.' + $(this).data('slide')).slideToggle(700);
      $('.' + $(this).data('fade')).fadeToggle(700);
    })
  })