title: jQuery: Toggle - List
body: <p><em>This is a continuation from here:</em> <a href="https://stackoverflow.com/questions/4590666/jquery-list-expands-on-page-load">jQuery: List expands on page load</a></p>
  
  <p>Hi,</p>
  
  <p>Since my previous post, I've worked on another list and come up with this: <a href="http://jsbin.com/emaza4/4" rel="nofollow noreferrer">http://jsbin.com/emaza4/4</a></p>
  
  <p>As you may see, the first <code>&lt;li&gt;</code> element with a <code>&lt;ul&gt;</code> child (item '#') opens automatically on page load, and the other "parents" stay closed until any one of them is clicked. I achieved this by putting item '#' under class 'abc' and the rest of the items under class 'xyz'.</p>
  
  <p>Next, I would like to be able to click on another parent, say, item "A-F" and it automatically closes any other opened parent, including item '#' that's from a different class ('abc' instead of 'xyz').</p>
  
  <p>Searching "toggle" on this website led me to this: <a href="https://stackoverflow.com/questions/4593953/jquery-toggle-dynamically">jQuery toggle dynamically</a></p>
  
  <p>So I tried adding to my code like so: <a href="http://jsbin.com/emaza4/3/" rel="nofollow noreferrer">http://jsbin.com/emaza4/3/</a> but it doesn't seem to be working. </p>
  
  <p>Could anybody point me in the right direction as to how to solve this problem? Thanks in advance. :)</p>