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.


<!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>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jrm213jrm213Commented:
hi,

this is a bug with jquery 1.4 (or at least a change in functionality from previous versions). try the attached code. I was not sure exactly how you wanted/exptected it to work though.
<!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: block;
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').siblings("span").hide();
	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").hide().delay(100).slideDown(2000);
	 else $(this).siblings("span").slideUp();
	});
}

/* ]]> */
</script>

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.