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