Toggle my menu when you click my nav button

What I am trying to achieve is when I click on my <div> class "menu" my <ul> with the class "nav" appears, and when its clicked again, it toggles so that its not visible.

HTML

<div class="menu">
  <div class="line"></div>
</div>
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Prices</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

JavaScript

$('line').click(function(){
    $('ul.nav').slideToggle();
})