title: Pure CSS Collapsible Tree Navigation with JQuery Animation
body: <p>I am using the Pure CSS Collapsible Tree Navigation featured on: <a href="http://www.thecssninja.com/css/css-tree-menu" rel="nofollow">http://www.thecssninja.com/css/css-tree-menu</a>. I would like to add some simple jquery to the nav to give it a smooth transition when collapsing open/closed, but not sure how. My code is as follows:</p>
  
  <pre><code>&lt;ul class="tree"&gt;
      &lt;li&gt;
          &lt;label for="folder1" class="menu_first"&gt;Treatment Options&lt;/label&gt; &lt;input type="checkbox" id="folder1" /&gt; 
          &lt;ul&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for="folder2" class="menu_first"&gt;Benefits &amp;amp; Risks&lt;/label&gt; &lt;input type="checkbox" id="folder2" /&gt; 
          &lt;ul&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- Benefits&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- Life &amp;amp; Death&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- Complications&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- Psychological Risks&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- Lifestyle Changes&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for="folder3" class="menu_first"&gt;Donation: Step-by-Step&lt;/label&gt; &lt;input type="checkbox" id="folder3" /&gt; 
          &lt;ul&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href=""&gt;- File 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;&lt;/li&gt;&lt;/ul&gt;
  
  
  
   ul.tree{
         padding:10px 5px 0 20px;
         width: 230px;
         background-color:#eaeaea;
         margin-top:0px;
         font-family:"FutConM",Arial,Helvetica,sans-serif;
         font-size:28px;
   }
   li{ 
   position: relative; 
   margin-left: -15px;
   list-style: none;
   color:#666;
   }
   li.file{
   margin-left: -1px !important;
   }
   li.file a{
   background:;
   color:#666;
   text-decoration: none;
   display: block;
   margin-left:-63px;
   line-height:25px;
   }
   li.file a[href *= '.pdf']{ 
   background: url(document.png) 0 0 no-repeat; 
   }
   li.file a[href *= '.html']{ 
   background: url(document.png) 0 0 no-repeat; 
   }
   li.file a[href $= '.css']{ 
   background: url(document.png) 0 0 no-repeat; 
   }
   li.file a[href $= '.js']{ 
   background: url(document.png) 0 0 no-repeat; 
   }
   li input{
   position: absolute;
   left: 0;
   margin-left: 0;
   opacity: 0;
   z-index: 2;
   cursor: pointer;
   height: 1em;
   width: 1em;
   top: 0;
   }
   li input + ul{
   background: url("/images/navtree/toggle-small-expand.png") no-repeat scroll 0 0;
   height: 17px;
   margin-left: -2px;
   margin-top: -17px;
   }
   li input + ul &gt; li{ 
   display: none; 
   margin-left: -14px !important;
   padding-left: 1px; 
   }
   li label{
   background:;
   cursor: pointer;
   display: block;
   padding-left: 15px;
   border-top:1px solid #999;
   }
   li label.menu_first:hover{
   background-color:#F63;
   }
   li label.menu_first:active{
   background-color:#F63;
   }
   li label.menu_first:visited{
   background-color:#F63;
   }
   li input:checked + ul{
   background: url("/images/navtree/toggle-small.png") 0px 0px no-repeat;
   margin-left: -2px;
   margin-top: -17px; /* 20px */
   padding: 1.563em 0 0 80px;
   height: auto;
   }
   li input:checked + ul &gt; li{ 
   display: block; 
   margin: 0 0 0.125em;  /* 2px */
   }
   li input:checked + ul &gt; li:last-child{ 
   margin: 0 0 0.063em; /* 1px */  
   }
  </code></pre>