Skip to content

Instantly share code, notes, and snippets.

@suweller
Last active June 29, 2017 18:46
Show Gist options
  • Save suweller/2436230 to your computer and use it in GitHub Desktop.
Save suweller/2436230 to your computer and use it in GitHub Desktop.
Show or hide elements in a form using data-show or data-hide
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
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment