jquery slideup/slidedown functionality
I have a checkbox, when clicked I want to slide the checkbox up and have its not dispaly. I can get it to slide up but then 1 second later it shows its ugly self again, how can i fix this. thank you very much
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.hiddenPanel
{
CLEAR: both;
DISPLAY: none;
}
.dataEntry
{
BACKGROUND-COLOR: #FFFFEB;
HEIGHT: 300px;
MIN-WIDTH: 300px;
MARGIN: 3px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#chkTestPay').click(function ShowMedPay() {
if ($('开发者_Go百科#chkTestPay').is(':checked')) {
$('#toggleTestPanel').slideUp();
$('#TestPanel').slideDown(1200);
$('#toggleTestPanel').css("display", "none");
}
else
$('#TestPanel').slideUp(2000);
$('#toggleTestPanel').slideDown(1200);
});
});
</script>
</head>
<body>
<div class="togglePanelOption" id="toggleTestPanel">
<h3>
Test?
<input type="checkbox" id="chkTestPay" /></h3>
</div>
<div id="TestPanel" class="hiddenPanel">
<h3>
Test 123
</h3>
<div class="dataEntry">
enter info please
</div>
</div>
</body>
</html>
Your else is badly defined, so the slidedown always runs.
<script type="text/javascript">
$(document).ready(function() {
$('#chkTestPay').click(function ShowMedPay() {
if ($('#chkTestPay').is(':checked')) {
$('#toggleTestPanel').slideUp();
$('#TestPanel').slideDown(1200);
$('#toggleTestPanel').css("display", "none");
} else {
$('#TestPanel').slideUp(2000);
$('#toggleTestPanel').slideDown(1200);
}
});
});
</script>
Is it this is what you are trying to achieve? http://jsfiddle.net/FAAjc/
加载中,请稍侯......
精彩评论