Skip to content

Instantly share code, notes, and snippets.

@mrjasonweaver

mrjasonweaver/example.html

Created November 12, 2012 23:19
Show Gist options
  • Save mrjasonweaver/4062742 to your computer and use it in GitHub Desktop.
Save mrjasonweaver/4062742 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example.html
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<p><label for="form-app-question">Question?</label></p>
<p><input type="radio" name="app-question" class="radio-select-reveal" id="app-question-1" value="no" /><label for="app-question-1">No</p>
<p><input type="radio" name="app-question" class="radio-select-reveal" id="app-question-2" value="yes-question" /><label for="app-question-2">Yes (with extra)</label></p>
<div id="yes-question-extra" class="extra-data">Select something<br>
<select name="choose_question">
<option value="NSPEC">Choose..</option>
<option value="H700">Argentinian</option>
<option value="H701">Bolivian</option>
<option value="H703">Californio</option>
<option value="H704">Central American</option>
<option value="H705">Chicano</option>
</select>
</div>
</fieldset>
<fieldset>
<p><label for="form-app-q-2">Question 2</label></p>
<p><input type="checkbox" name="app-1" id="form-app-q-1" class="radio-select-reveal" value="question2" /><label for="form-app-q-1">Another Q 1</label></p>
<p><input type="checkbox" name="form-app-q-2" id="form-app-q-2" class="radio-select-reveal" value="question2" /><label for="form-app-q-2">Another Q 2 (with extra)</label></p>
<div id="question2-extra" class="extra-data">
Select something<br>
<select name="origin_native">
<option value="NSPEC">Choose..</option>
<option value="N389">Abenaki</option>
<option value="N403">Absentee Shawnee</option>
<option value="N236">Acoma</option>
<option value="N424">Agua Caliente</option>
</select>
</div>
<p><input type="checkbox" name="form-app-q-3" id="form-app-q-3" class="radio-select-reveal" value="question3" /><label for="form-app-q-3">Another Q 3</label></p>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="radioButtonReveal.js"></script>
</body>
</html>
Raw
radioButtonReveal.js
var App = {};
App.radioButtonReveal = function(selector, reveal_container) {
$(reveal_container).hide();
$(selector).live('change', function() {
var $this = $(this)
, $checked = $this.is(':checked')
, $not_checked = $(selector).is(':not(:checked)');
$(selector).each(function() {
if ($not_checked) {
$(reveal_container).slideUp();
}
});
if ($checked) {
$("#"+$this.val()+"-extra").slideDown();
}
else {
$("#"+$this.val()+"-extra").slideUp();
}
});
}
jQuery(document).ready(function($) {
App.radioButtonReveal('.radio-select-reveal' ,'.extra-data');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment