jQuery: slideDown() is quirky
I want options to slide down when a checkbox is checked, and to slide back up when the checkbox is unchecked.
My code behaves strangely when I use jQuery 1.4.4.
My code behaves less strangely when I use jQuery 1.4.2 but it is acts weird with both versions. If you test my code you will see what I mean.
My code behaves strangely when I use jQuery 1.4.4.
My code behaves less strangely when I use jQuery 1.4.2 but it is acts weird with both versions. If you test my code you will see what I mean.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
div.url {
background: #eee;
padding: 10px;
margin: 10px;
}
div.url span {
display: none;
margin: 0;
padding: 0;
background: #ffaaaa;
}
.removeUrl {
text-align: right;
color: #fa0000;
float: right;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h2>Step 1: Add one or more websites to be monitored</h2>
<div id="urls">
<div class="url" >
<p>
<label for="Url1">Web address to monitor:</label>
<input type="text" id="Url1" name="Url1" />
</p>
<p>
<label for="checkUrl1">Check every:</label>
<select id="checkUrl1" name="checkUrl1">
<option value="1">Minute</option>
<option value="5">Five Minutes</option>
<option value="10">Ten Minutes</option>
<option value="15">Fifteen Minutes</option>
<option value="30">Half Hour</option>
<option value="1">Hour</option>
<option value="120">Two Hours</option>
</select>
</p>
<p>
<input class="selectMe" type="checkbox" id="emailNotificationUrl1" name="emailNotificationUrl1" value="1" />
<label for="emailNotificationUrl1">Receive email notifications</label>
<span>
<br />
<input type="checkbox" id="emailNotificationDownUrl1" name="emailNotificationDownUrl1" value="1" />
<label for="emailNotificationDownUrl1">Receive an email notification when the site goes down</label>
<br />
<input type="checkbox" id="emailNotificationChangesUrl1" name="emailNotificationChangesUrl1" value="1" />
<label for="emailNotificationChangesUrl1">Receive an email notification if the site changes</label>
<br />
<input type="checkbox" id="emailNotificationSpecificUrl1" name="emailNotificationSpecificUrl1" value="1" />
<label for="emailNotificationSpecificUrl1">Receive an email notification if the site does not contain the following text or code:</label>
<input type="text" id="emailNotificationSpecificAddressUrl1" name="emailNotificationSpecificAddressUrl1" />
<br />
</span>
</p>
<p>
<input class="selectMe" type="checkbox" id="phoneNotificationUrl1" name="phoneNotificationUrl1" value="1" />
<label for="phoneNotificationUrl1">Receive phone notifications</label>
<span>
<em>
<input type="checkbox" id="phoneNotificationDownUrl1" name="phoneNotificationDownUrl1" value="1" />
<label for="phoneNotificationDownUrl1">Receive a phone call when the site goes down</label>
</em>
<em>
<input type="checkbox" id="phoneNotificationChangesUrl1" name="phoneNotificationChangesUrl1" value="1" />
<label for="phoneNotificationChangesUrl1">Receive a phone call if the site changes</label>
</em>
<em>
<input type="checkbox" id="phoneNotificationSpecificUrl1" name="phoneNotificationSpecificUrl1" value="1" />
<label for="phoneNotificationSpecificUrl1">Receive a phone call if the site does not contain the following text or code:</label>
<input type="text" id="phoneNotificationSpecificAddressUrl1" name="phoneNotificationSpecificAddressUrl1" />
</em>
</span>
</p>
<p>
<input class="selectMe" type="checkbox" id="smsNotificationUrl1" name="smsNotificationUrl1" value="1" />
<label for="smsNotificationUrl1">Receive SMS notifications</label>
<br />
<span>
<em>
<input type="checkbox" id="smsNotificationDownUrl1" name="smsNotificationDownUrl1" value="1" />
<label for="smsNotificationDownUrl1">Receive an SMS notification when the site goes down</label>
</em>
<em>
<input type="checkbox" id="smsNotificationChangesUrl1" name="smsNotificationChangesUrl1" value="1" />
<label for="smsNotificationChangesUrl1">Receive an SMS notification if the site changes</label>
</em>
<em>
<input type="checkbox" id="smsNotificationSpecificUrl1" name="smsNotificationSpecificUrl1" value="1" />
<label for="smsNotificationSpecificUrl1">Receive an SMS notification if the site does not contain the following text or code:</label>
<input type="text" id="smsNotificationSpecificAddressUrl1" name="smsNotificationSpecificAddressUrl1" />
</em>
</span>
</p>
</div>
</div>
<p>
<input id="addUrl" type="button" value="Add an additional web address to monitor" />
</p>
<p class="later">You may add additional web addresses to your account later.</p>
<div>
<input id="submit" class="submit" type="submit" value="Next Step" />
</div>
<script type="text/javascript">
/* <![CDATA[ */
var ci=0;
$(document).ready(function() {
$('#addUrl').click(function() {
$('#urls').append('<div class="url"><div class="removeUrl">x</div>'+ String($('.url').first().html()).replace(/Url1/g, "Url"+(ci++)) + '</div>');
if($('div.url').size()>5) {
$('#addUrl').css('display','none');
$('.later').css('color','#fa0000')
}
selectMe();
removeMe(this);
});
$('.selectMe').attr('checked', false);
selectMe();
});
function removeMe (t) {
$('.removeUrl').unbind('click');
$('.removeUrl').click(function() {
$(this).parent().remove();
$('#addUrl').css('display','block');
$('.later').css('color','#000000')
});
}
function selectMe () {
$('.selectMe').unbind('click');
$('.selectMe').click(function() {
if( $(this).attr('checked')) $(this).siblings("span").slideDown(2000);
else $(this).siblings("span").slideUp();
});
}
/* ]]> */
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.