JQuery hide div on checkbox

sanjshah12
sanjshah12 used Ask the Experts™
on
Hi,

I have the following code which works but I would like to reverse this so that by default the div is shown (I will remove display: none) but when the checkbox is checked the div (checked) should be hidden.

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show div on check for checkbox</title>
<script type="text/javascript" src="Jquery/jquery.min.js"></script>
</head>
<body>
<form>
Check me<input name="checkbox" type="checkbox" onclick="$(this).is(':checked') && $('#checked').slideDown('slow') || $('#checked').slideUp('slow');" /> 
<p id="checked" style="display: none; margin: 10px; height: 100px; background-color: #f5f5f5; padding: 10px" >
Put some content here
</p> 
</form>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
another question is this possible to emulate this with ExtJS ?
see this jquery solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show div on check for checkbox</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
	function toggleDiv(id)
	{
		id = "#"+ id;
		if ( $(id).is(':checked') )
		{
			 $('#checked').slideDown('slow')
		}
		else
		{
			 $('#checked').slideUp('slow');
		}
	}
</script>
</head>
<body>
<form>
Check me<input name="checkbox" id="checkbox" type="checkbox" onclick="toggleDiv(this.id)" /> 
<p id="checked" style="display: none; margin: 10px; height: 100px; background-color: #f5f5f5; padding: 10px" >
Put some content here
</p> 
</form>
</body>
</html>

Open in new window

Author

Commented:
Thanks Gurvinder, but I tried copying but nothing happens when checking/unchecking the checkbox?
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

did you changed the path to jquery lib in line number 6?

Author

Commented:
Apologies, you are correct, just 2 questions:

- when the pages first loads the checkbox is unchecked (by default) then when you click the checkbox nothing happens but then when you click it works not sure maybe the does not get registered first.

- would you know if I can emulate this with ExtJS?

Thanks
Top Expert 2009
Commented:
speaking of jquery,
I guess you  should be doing it this way... You need not have the event handlers inline...

I haven't worked much on ExtJS.. just for some yahoo hack.. should be doable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show div on check for checkbox</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#myCheckBox").click(function(){
		if($(this).is(':checked'))
		{
			$("#checked").slideUp('slow');
		}
		else
		{
			$("#checked").slideDown('slow'); 
		}
	});
});
</script>
</head>
<body>
<form>
Check me<input name="checkbox" id="myCheckBox" type="checkbox" /> 
<p id="checked" style="margin: 10px; height: 100px; background-color: #f5f5f5; padding: 10px" >
Put some content here
</p> 
</form>
</body>
</html>

Open in new window

Author

Commented:
Thanks Gurvinder!
did my solution not worked?

Author

Commented:
Yes perfectly!

Author

Commented:
Apologies I did not see the expert replying.

Your comment worked but not when the first page loads checking /unchecking the checkbox  thereafter it works (see my comments below your post) maybe I should have split the points here - sorry
then why no points for me? did i missed something?
Top Expert 2009

Commented:
sanjshah,

Please raise a request to revoke points and award all to gurvinder. I am not interested about the point s until you have a valid solution and you understand what exactly is happening in your  page.

gurvinder372,

One of the main aims of Jquery is to offer unobtrusive scripting. Check if your solution truly is...  

Best,
kadaba

Author

Commented:
No sorry - I did not notice that kadaba had responded - I thought it was you as his code works - apologies is it possible to split the points after assigning?
I guess you have misunderstood. I am not looking for all the points. As you have mentioned, it is his code that worked.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial