<button class="js-toggle">Click it!!</button>
<div class="js-target">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quasi officiis eaque veritatis maxime?</p>
</div>
var $toggle = $('.js-toggle'); // スライダーを開閉するボタン
var $target = $('.js-target'); // 開閉される対象

// トグルボタンのクリックイベントにjQueryスライドメソッドをバインド
$toggle.on('click', function () {
  $target.slideToggle();
  // jsが最初に読み込まれたタイミングで$toggle要素のクリックイベントを自動的に発火
  // (初期状態でスライダーは閉じられている)
}).trigger('click');
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js