title: jQuery collapsible UL
body: <p>I'm creating a navigation system using jQuery. What I want to achieve is having the parent elements visible on the page load and the child elements hidden. Which I have done very simply.</p>
  <p>However when I toggle between the other parent elements I want to be able to hide the previous child elements so that I can only open up one <code>&lt;ul&gt;</code> at a time.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//user nav
  $('.child').hide();
  $('.parent').click(function() {
      $(this).find('ul').slideToggle();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="rightBottom"&gt;
  &lt;h1 class="boxheadings"&gt;Other functions&lt;/h1&gt;
  &lt;p class="boxp"&gt;Click this button to view your current published site in a new window. This will not show your most recent changes until you click the ‘Publish Changes’ button on the right, alternatively click view local to see unpublished changes.&lt;/p&gt;
  &lt;ul id="usernav"&gt;
      &lt;li class="parent"&gt;Manage
          &lt;ul class="child"&gt;
              &lt;li&gt;child11&lt;/li&gt;
              &lt;li&gt;child12&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="parent"&gt;Subscriptions
          &lt;ul class="child"&gt;
              &lt;li&gt;E-Briefings&lt;/li&gt;
              &lt;li&gt;E-Briefings Subscriptions&lt;/li&gt;
              &lt;li&gt;Knowledge Briefings&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="parent"&gt;Media Store
          &lt;ul class="child"&gt;
              &lt;li&gt;Image Store&lt;/li&gt;
              &lt;li&gt;Document Store&lt;/li&gt;
              &lt;li&gt;Media Store&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>