アコーディオンパネルの実装

たまにはjQueryのお勉強。
jQueryの仕組み等々なんとなく理解出来てきているので、試しに実装してみた。

HTMLこんな感じ(slimだけど)で書いておく。

#accordion
  .sub-title(data-target="#content_1")
    | アコーディオン1
  #content_1.content
  .sub-title(data-target="#content_2")
    | アコーディオン2
  #content_2.content
  .sub-title(data-target="#content_3")
    | アコーディオン3
  #content_3.content
  .sub-title(data-target="#content_4")
    | アコーディオン4
  #content_4.content

JavaScript(CoffeeScriptだけど)はこんな感じ。

$ ->
  $('.sub-title').on 'click', (obj)->
    accordion(obj)

accordion = (obj)->
  target = obj.target.dataset['target']
  _.each $('#accordion .content'), (obj) ->
    $(obj).hide()
  $(target).show()

ちょっと初期化のアクションを書いておかないと、最初全部に開きっぱなしになっちゃうのであれですけどね。
こんな感じであのﾊﾟｶﾊﾟｶ書けるのかって感動した。