jQueryでアコーディオンパネルを作る

最近javascriptを使えないと世の中的にやばいんじゃないかと思いjQueryを勉強し始めました…。
勉強してる中でアコーディオンパネルを作ったわけなんですが、想像以上に簡単に実装できちゃう感じを知り若干感動したのでブログ化です。
(これで感動しているあたり素人感丸出しなのは内緒。）
今更こんなん記事にします？っていう指摘は言わないであげてください。笑

アコーディオンパネルってなんや

アコーディオンパネルはクリックするとクリックした項目の下に文字なんかがスライドで出てきて、もう一回クリックするとスライドしてもとに戻るやつです。
説明下手すぎてイメージつかないですね。
つまりこんな感じのやつです。

初期表示

でこれの一番上の項目をクリックすると

こんな感じでクリックするとヌルッと出てくるやつです。
もう一回同じ項目をクリックすると初期表示の状態に戻ります

とりあえず作ってみよう

ということでまずはHTMLとCSSを作ります。

HTML

<ul id="accordion mdl-list">
  <li class="accordion-item mdl-list__item">
     <h3 class="question">職業はなんですか？</h3>
     <span>+</span>
     <div class="answer">
        <p>システムエンジニアです。いわゆるSEです。</p>
     </div>
  </li>
  <li class="accordion-item">
     <h3 class="question mdl-list__item">なんのスポーツが好きですか？</h3>
     <span>+</span>
     <div class="answer">
	<p>野球</p>
     </div>
  </li>
  <li class="accordion-item mdl-list__item">
     <h3 class="question">携帯は何使ってますか？</h3>
     <span>+</span>
     <div class="answer">
        <p>iPhone</p>
     </div>
  </li>
</ul>

初期に表示されている箇所がh3要素、出たり隠れたりする箇所が<div class="answer">~</div>の部分になります。

CSS

ul {
  list-style: none;
}

.accordion-item {
  position: relative;
  width: 400px;
  border-bottom:1px solid #ccc;
  cursor: pointer;
  margin-top: 5px;
}
.accordion-item:hover {
  background-color: #E6E6E6;
}

.question {
  font-size: 18px;
  margin: 0;
  padding: 0;
}

.accordion-item span {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #B3B3B3;
  font-size: 20px;
}

.answer {
  display: none;
  font-size: 12px;
}

初期表示の状態では出たり隠れたりする部分をdisplay: none;で画面に表示されないようにしておきます。

javascriptを書くッッ

さてアコーディオンパネルを実現するためのjavascriptを書きます。
とはいってもjQueryを使うとすごくさっくりした記述で処理が書けちゃいます！

$(function() {
  $('.accordion-item').click(function(){
        
    //出隠れする部分を変数に格納しておく
    var $answer = $(this).children('.answer');

    //hasClassメソッドで出隠れする部分にopenが存在するか確認
    if ($answer.hasClass('open')) {

      //出隠れ部分が出ている場合の処理

      //&ltdiv class="answer open"&gtからopenを消す
      $answer.removeClass('open');

      //出ている部分をスライドアップして隠す
      $answer.slideUp();

      //横っちょにある開閉ボタンを+に変える
      $(this).children('span').text('+');
    } else {

      //出隠れ部分が隠れている場合の処理
      
      //&ltdiv class="answer"&gtにopenを追加する
      $answer.addClass('open');

      //出す部分をスライドダウンして表示させる
      $answer.slideDown();

      //横っちょにある開閉ボタンを-に変える
      $(this).children('span').text('-');
    }
  });
});

<div class="answer">にopenを追加することで開いたり、隠したりする感じ。
openを追加することでCSSに記載しているdisplay: none;が無効になったり、有効になったりするイメージかしら。

とはいえたった10行前後で良く見るあのアコーディオンパネルさんを実現できるのはちょっと感動。
Ruby on Railsを極めつつ、javascriptも極めていきたいっすなあ。
とはRailsさんはcoffeescriptだからまた勉強が必要やが…。

そのうちcoffeescript備忘録つくろ