title: How close other element when clicked using .slideToggle
body: <p>I'm trying to make an accordion menu, how ever, i need the menus to open only 1. how do i close other li when clicked?</p>
  
  <p>below is the code i use for toggling the menu. How do i target all other li to close when an li is clicked.</p>
  
  <pre><code>&lt;li class="cat_parent"&gt;
    &lt;h2 class="head par_title"&gt;Books&lt;/h2&gt;
    &lt;div class="content"&gt;01&lt;/div&gt;
    &lt;div class="content"&gt;02&lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="cat_parent"&gt;
    &lt;h2 class="head par_title"&gt;Magazine&lt;/h2&gt;
    &lt;div class="content"&gt;01&lt;/div&gt;
    &lt;div class="content"&gt;02&lt;/div&gt;
    &lt;div class="content"&gt;03&lt;/div&gt;
    &lt;div class="content"&gt;04&lt;/div&gt;
  &lt;/li&gt;
  
  $(document).ready(function(){
     ('.head').click(function(e){
        e.preventDefault();
        $(this).closest('li').find('.content').slideToggle();
     });
  });
  </code></pre>
  
  <p>your help is much appreciated!</p>