<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#divid {
background: Red;
padding: 20px 20px 20px;
position: relative;
border-top: solid 2px #000000;
}
#divid #deleteid {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#chkno').click(function() {
// $('#divid').slideUp ('slow');
//$("#divid").animate({ opacity: 'hide' }, "slow");
$("#divid").fadeOut('medium');
})
$('#chkyes').click(function() {
// $('#divid').slideDown('slow');
$("#divid").fadeIn('medium');
})
});
</script>
</head>
<body>
<form>
<input type="radio" id ="chkyes" name="radio" value="yes" /> yes<br />
<input type="radio" id ="chkno" name="radio" value="no" /> no
<div id="divid">
<h3>If you click yes. 'Div' will show</h3>
<H3>if you click no. then 'Div' will hide </H3>
</div>
</form>
</body>
</html>
No comments:
Post a Comment