Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

What am I doing wrong with this JQuery thing that's supposed to hide my class?

Head out to http://brucegust.com/portfolio/calendar/body.php

Here's my code:

<!DOCTYPE html>
<head>
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Javascript</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<table style="border-spacing:0; border-collapse:collapse;">
	<tr>
		<td style="padding:0xp;">CATN</td>
		<td style="text-align:right; padding:0px;"><input type="checkbox" value="Y" name="CTX" checked id="CATN_button" onchange="CATN();">&nbsp;</td>
	</tr>
</table>
<br>
<div class="CATN_long">hello</div>

<script>

$('#CATN_button').change(function(){
		
	var v = this.checked ? 'show' : 'hide';
	$('CATN_long').v();
	}

</script>


</body>
</html>

Open in new window


I want to create a series of functions that hide various classes embedded throughout my page. What you see is my best effort and I'm falling short. What am I missing.

Basically, what I need is that the page starts with the box checked and the class is visible. Should a user "un-click" it, the class is hidden. If they click it, it's revealed again.

How do I pull that off?
Avatar of Kiran Paul VJ
Kiran Paul VJ
Flag of India image

$('#CATN_button').change(function(){
	
          if($(this).is(':checked') ) {
                 $('CATN_long').show();
          }
          else {
                $('CATN_long').hide();
           }
}

Open in new window

Avatar of Bruce Gust

ASKER

kiranvj...

Tried it and I'm still missing something. Check out the updated code at http://brucegust.com/portfolio/calendar/body.php and tell me where I'm going south.
My bad, syntax error

$('#CATN_button').change(function(){
          if($(this).is(':checked') ) {
                 $('.CATN_long').show();
          }
          else {
                $('.CATN_long').hide();
           }
});

Open in new window


Play with the code here
Sweet!

One more thing, if you don't mind:

When I try to duplicate your code, I run into problems. In other words, I now have two divs and two different checkboxes. Take a look at what I've got at http://brucegust.com/portfolio/calendar/body.php if you would, and tell me what I need to be sensitive to in order to replicate your magic over several similar scenarios.
ASKER CERTIFIED SOLUTION
Avatar of Kiran Paul VJ
Kiran Paul VJ
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
Perfect!