Link to home
Start Free TrialLog in
Avatar of sanjshah12
sanjshah12Flag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery hide div on checkbox

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

Avatar of sanjshah12
sanjshah12
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

another question is this possible to emulate this with ExtJS ?
Avatar of Gurvinder Pal Singh
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

Thanks Gurvinder, but I tried copying but nothing happens when checking/unchecking the checkbox?
did you changed the path to jquery lib in line number 6?
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
ASKER CERTIFIED SOLUTION
Avatar of kadaba
kadaba
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks Gurvinder!
did my solution not worked?
Yes perfectly!
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?
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

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.