Show or hide elements in a form using data-show or data-hide

data-toggle.coffee

class window.DataToggle
  get: (str) ->
    $("##{str}")
  ids: (type, e) ->
    $(e).attr("data-#{type}").split(' ')

  constructor: ->
    _self = @
    _self.data_show(_self, $(e).parent()) for e in $('[data-show]')
    _self.data_hide(_self, $(e).parent()) for e in $('[data-hide]')
    $('[data-show]').parent().change ->
      _self.data_show(_self, @)
    $('[data-hide]').parent().change ->
      _self.data_hide(_self, @)

  data_show: (_self, e) ->
    e = $(e)
    e.find('[data-show]').each ->
      _self.get(id).hide() for id in _self.ids('show', @)
    e.find('[data-show]:selected, [data-show]:checked').each ->
      _self.get(id).show() for id in _self.ids('show', @)

  data_hide: (_self, e) ->
    e = $(e)
    e.find('[data-hide]').each ->
      _self.get(id).show() for id in _self.ids('hide', @)
    e.find('[data-hide]:selected, [data-hide]:checked').each ->
      _self.get(id).hide() for id in _self.ids('hide', @)

new DataToggle

jquery-data-show-or-hide-toggle.html

<form>
  <select id='where_is_wally'>
    <option value="warm">Warm</option>
    <option value="warmer">Warmer</option>
    <option data-show="wally" value="Wally">Wally</option>
    <option value="cold">Cold</option>
    <option value="colder">Colder</option>
  </select>
  <div id='wally'>Congratulations, you've found Wally.</div>
  <div class='radio-buttons'>
    <input name='monkey' type='radio' data-show='monkey' />
    <input name='monkey' type='radio' />
  </div>
  <div id='monkey'>Monkey!</div>
</form>