toggleable_container.coffee

# app/assets/javascripts/toggleable_container.coffee
class @ToggleableContainer
  constructor: (el) ->
    @$el = $(el)
    @$container = $("#" + @$el.data("toggleable"))

    @_bindEvents()

  _bindEvents: ->
    @$el.on "change", @_toogle

  _toogle: =>
    @$container.slideToggle()

new ToggleableContainer(el) for el in $("[data-toggleable]")

toggleable_container.html

<!-- spec/javascripts/fixtures/toggleable_container.html -->
<input type="checkbox" data-toggleable="hidden">
<div id="hidden" style="display:none">
  I'm hidden
</div>

<input type="checkbox" data-toggleable="visible">
<div id="visible">
  I'm visible
</div>

toggleable_container_spec.coffee

# spec/javascripts/toggleable_container_spec.coffee
describe "ToggleableContainer", ->
  beforeAll ->
    loadFixtures("toggleable_container.html")
    new ToggleableContainer(el) for el in $("[data-toggleable]")

  it "displays hidden container on click", ->
    $("[data-toggleable=hidden]").click()
    expect($("#hidden")).toBeVisible()

  it "hides container on click", ->
    $("[data-toggleable=visible]").click()

    expect($("#visible")).not.toBeVisible()