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?
brucegustPHP DeveloperAsked:
Who is Participating?
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.

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

Open in new window

0
brucegustPHP DeveloperAuthor Commented:
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.
0
Kiran Paul VJComputer EngineerCommented:
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
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

brucegustPHP DeveloperAuthor Commented:
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.
0
Kiran Paul VJComputer EngineerCommented:
What you are doing is correct.

Since both divs have same text hello you are not able to differentiate it. I changed the text inside the divs and now you can see which div is getting hidden.

Check here

And btw, no need to call onchange="CTX(); and onchange="CATN();"

You can call that functions inside your jQuery event handlers like this

$('#CATN_button').change(function(){
    
         CATN();

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

Open in new window


And make sure you define the function CATN() and  CTX() somewhere, else it will throw error.
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
brucegustPHP DeveloperAuthor Commented:
Perfect!
1
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.