Edit in JSFiddle

$(document).ready(function() {
    var treeMan = {cur: null, act:''};
    
    $('ul.tree li').each(function() {
        if($(this).children().length>0) $(this).css('cursor', 'pointer');
        else $(this).css('cursor', 'default');
    });
    
    $('ul.tree li').on('click', function(event) {
         event.stopPropagation();
         event.preventDefault();
         treeMan.cur = $(this).children('ul').first();
         treeMan.cur.toggle();  
        
         treeMan.act = (treeMan.cur.css('display') == 'block') ? 'show' : 'hide';
         
         console.log (treeMan);
     });
});

  <div class="example">
   <ul class="tree">
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li class="last">Mouse</li>
       </ul>
      </li>
      <li class="last">Reptiles</li>
     </ul>
    </li>
    <li class="last">Plants
     <ul>
      <li>Flowers
       <ul>
        <li>Rose</li>
        <li class="last">Tulip</li>
       </ul>
      </li>
      <li class="last">Trees</li>
     </ul>
    </li>
   </ul>
  </div>
  

/**
referenced by
http://odyniec.net/articles/turning-lists-into-trees/ */

ul.tree, ul.tree ul {
     list-style-type: none;
     background: url(http://odyniec.net/articles/turning-lists-into-trees/vline.png) repeat-y;
     margin: 0;
     padding: 0;
   }
   
   ul.tree ul {
     margin-left: 10px;
   }

   ul.tree li {
     margin: 0;
     padding: 0 12px;
     line-height: 20px;
     background: url(http://odyniec.net/articles/turning-lists-into-trees/node.png) no-repeat;
     color: #369;
     font-weight: bold;
   }

   ul.tree li.last {
     background: #fff url(http://odyniec.net/articles/turning-lists-into-trees/lastnode.png) no-repeat;
   }