jquery - css transition effect not working on click? -

I am trying to apply the transition effect of CSS3 on form detail, when its title is clicked but it Not working

HTML:

  & lt; Section class = "widget" id = "widget-1" & gt; & Lt; h4 & gt; Contact us & lt; / H4 & gt; & Lt; Form class = "contact-form collapse" role = "form" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "name" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "email" & gt; & Lt; Input type = "text" class = "form-control" placeholder = "phone number" & gt; & Lt; textarea class = "form-control" placeholder = "question" & gt; & Lt; / Textarea & gt; & Lt; Button type = "submit" & gt; Submit & lt; / Button & gt; & Lt; / Form & gt; & Lt; / Section & gt; & Lt ;! - Widget-1 - & gt;   
  CSS   
  # widget-1 h4 {cursor: pointer; } #Week-1 Forms Collapse {height: 0 pixels; } #Views1 Contact form {Overflow: hidden; Height: auto; Transition: all 0.9 s linear; Webkit-Infection: all 0.9 linear; -Moose infection: all 0.9 s linear 0.5 s; -MMS transition: all 0.9 s linear; -O-Infection: all 0.9 linear; Click (function () ($ ('$') ()   
  Jquery   
  $ ( '# Widget-1 h4' .contact-form '). ToggleClass (' collapse ');});   
     
 
 
      
 JS  
  $ ('# widget-1 h4'). Click the 'slow');} and {$ ('' contact form '') ($ ('($:') # Widget-1 Form '). SlideUp (' Slow ');}});   
 css  
  # widget-1 h4 {cursor: pointer; } # Widget-1 form {display: none; }