title: Collapsible list in html with jquery
body: <p>I'm trying to make a collapsible date selector for our blog. I've looked at a ton of JavaScript/jquery/css examples but I can't seem to get any of them to work well with a 3 level list.
  This is the layout I'm trying to accomplish:</p>
  <pre><code>&gt;2012
    &gt;July
      &gt;title of muh new blag!
  </code></pre>
  <p>and here are the tags:</p>
  <pre><code>&lt;ul class=&quot;example_menu&quot;&gt;
    &lt;li&gt;&lt;a class=&quot;expanded&quot;&gt;Section A&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link A-A&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link A-A-A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link A-A-B&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link A-B&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link A-C&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link A-D&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;footer&quot;&gt;&lt;span&gt; &lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&quot;collapsed&quot;&gt;Section B&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-A&lt;/a&gt;
          &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-A-A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-A-B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-A-C&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-B&lt;/a&gt;
          &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-B-A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-B-B&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link B-D&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;footer&quot;&gt;&lt;span&gt; &lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&quot;collapsed&quot;&gt;Section C&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link C-A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link C-B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link C-C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link C-D&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;footer&quot;&gt;&lt;span&gt; &lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I'm trying to do something as simple as blogspot's blog archive. (<a href="http://wollay.blogspot.com/" rel="nofollow noreferrer">Check it out here on this guy's page</a>)</p>
  <p>The one I've found and like this most is <a href="http://www.mathachew.com/sandbox/collapsible-menu/" rel="nofollow noreferrer">this one</a>. And after stripping out a LOT of the extra code, I come out with this:</p>
  <blockquote>
  <p>$('.example_menu li &gt; .expanded').show('normal');</p>
  <p>$('.example_menu li &gt; a').click(function() {</p>
  <p>$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('ul').toggle('normal');</p>
  <p>});</p>
  </blockquote>
  <p>This lists expands and contracts and would work great for a simple 2 level list such as:</p>
  <pre><code>&gt;Year
      &gt;Month
  </code></pre>
  <p>However, with a 3 level list it either collapses while expanding the 2 deeper levels or expands both levels. I'm trying to make the immediate lower list to collapse/expand and leave the lowest list collapsed until activated directly.</p>
  <p>Are there any simpler jquery collapsible lists?</p>
  <p>Or is there a good way to get the immediate interior ul element and toggle that one while turning all other interior ul elements to collapsed?</p>