Hide on click

I have a wordpress site I'm trying to put in a cost calculator for my customers. Each field of cost I can create a custom CSS class no problem. What I'm trying to do is have a field hidden unless a certain selection is clicked then I want it to be visible. Here is the code.

<script type="text/javascript">
jQuery(document).ready(function(){    
jQuery(".cvet").hide();   
 jQuery("#jzzf_2_sistema-1").click(function(){jQuery(".cvet").hide();   
     jQuery(".cvet1").fadeIn("slow"); 
   });   
 jQuery("#jzzf_2_sistema-2").click(function(){
jQuery(".cvet").hide();     
   jQuery(".cvet2").fadeIn("slow"); 
   });}); </script>

Code (markup):

I got the code to hide correctly but I cant get it to show. can somebody explain what how to decipher jzzf_2_sistema-1. Can you have underscores and hyphens in css class names or are hyphens referring to something else?? I'm really new to this but I'm learning!

 

Instead of 'hide' use 'toggle'. The 'toggle' method simply toggles the visibility of elements

jQuery(".cvet").toggle(); 

Code (markup):