We usually see the Animation on webpage which is totally based upon the user input. Exactly Same today we are going to do this in Our Tutorials. In this Tutorials we will See How we can show or hide a Division (<div>) based on user selection on Check box of Form input.
Steps to Make a Divison Show/Hide :
- First Of All Add jQuery Latest Version in Your Webpage.
- Then Make Ready your HTML Webpage with Division you want to hide and also the checkbox
- Now See the Below Source Code where the Division and Checkbox is assigned with a class name which define them.
Source Code :
<html>
<head>
<title>CheckBox Selection</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="answer">
Answer
</div>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>
<script type="text/javascript">
$(document).ready(function(){
$('.answer').hide();
});
</script>
<script type="text/javascript">
function valueChanged()
{
if($('.coupon_question').is(":checked"))
$(".answer").show();
else
$(".answer").hide();
}
</script>
</body>
</html>
For Further Reading,
0 comments:
Post a Comment