読者です 読者をやめる 読者になる 読者になる

(define -ayalog '())

括弧に魅せられて道を外した名前のないプログラマ

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

JavaScript CoffeeScript

たまには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()

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