JavaScript to auto-expand list items' content

Here's a little JavaScript snippet that will allow the mouse hovering over list item to automatically expand its content. Each item will also stay expanded when clicked:

function show_div(me, lock) // Hide/show the first div section part of the 'me' element
{
   var elem = me.getElementsByTagName("div");
   if (elem.length > 0)
   {
      if ( elem[0].style.display != "block" )
      {
         elem[0].style.display="block";
         me.style.cursor="pointer";
      }
      if ( !me.onmouseout && ((lock && me._lock)  (!lock && !me._lock)) )
         me.onmouseout = function () { elem[0].style.display="none"; };
      if (lock)
      {
         if ( !me._lock )
         {
            me._lock = true;
            me.onmouseout = null;
         }
         else
            me._lock = false;
      }
   }
}

Then, you'd use it like this (I had to use '{' and '}' instead of '<' and '>' because it wouldn't work in the blogger editor):

{LI onclick="show_div(this,true);" onmouseover="show_div(this);"}Item text
{DIV class="hiddencontent"}
Expanded content...
{/DIV}{/LI}

Then the style def for hiddencontent is:

div.hiddencontent
{
   display:none;
   background: #FEFEEE;
   border: 1px solid #E7E7c7;
   cursor: pointer;
   padding: 3;
}