Skip to content

Instantly share code, notes, and snippets.

@massiws

massiws/toggle_div.html

Created July 31, 2014 00:16
Show Gist options
  • Save massiws/e36da995d25205502451 to your computer and use it in GitHub Desktop.
Save massiws/e36da995d25205502451 to your computer and use it in GitHub Desktop.
Download ZIP
JQUERY: Toggle DIVs with radio buttons
Raw
toggle_div.html
<html>
<head>
<title>Toggle DIVs with radio buttons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("[name=toggler]").click(function(){
$('.hide').hide();
$("#div-" + $(this).val()).show();
});
});
</script>
</head>
<body>
<label>Show first DIV<input id="rdb1" type="radio" name="toggler" value="1" /></label><br/>
<label>Show second DIV<input id="rdb2" type="radio" name="toggler" value="2" /></label>
<fieldset style="width:200px;">
<div id="div-1" class="hide" style="display:none">
<p>I'm the first DIV!</p>
</div>
<div id="div-2" class="hide" style="display:none">
<p>I'm the second DIV!</p>
</div>
</fieldset>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment