Skip to content

Instantly share code, notes, and snippets.

@atsea

atsea/index.html

Last active June 6, 2017 13:14
Show Gist options
  • Save atsea/7b713472540a1c6919caf0ec8e37649d to your computer and use it in GitHub Desktop.
Save atsea/7b713472540a1c6919caf0ec8e37649d to your computer and use it in GitHub Desktop.
Download ZIP
jQuery: toggle div
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://github.com/jgthms/bulma/blob/master/css/bulma.css" type="text/css" media="screen">
</head>
<body>
<section class="section">
<div class="container">
<form method="post" action="" id="ud_fdp_form" name="ud_fdp_form">
<div class="field">
<label for="Requestor" class="label">Name</label>
<p class="control has-icons-right">
<input type="checkbox" id="bill_to_co" name="bill_to_co" class="toggleCheck">
</p>
<div class="subTableDiv">
Content goes here.
</div>
</div>
</form>
</div>
</section>
<script src="//www1.udel.edu/hr_forms/js/libs/jquery/jquery.min.js"></script>
<script>
// toggle optional billing address
var subTableDiv = $("div.subTableDiv");
var toggleCheck = $("input.toggleCheck");
toggleCheck.is(":checked")
? subTableDiv.hide()
: subTableDiv.show();
$("input.toggleCheck").click(function() {
if (this.checked == true) {
subTableDiv.slideUp("medium");
$("form").valid();
} else {
subTableDiv.slideDown("medium");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment