Manipulating Frame Size

I'm attempting to make a div hidden upon an image click, and it's not working.

Here's the code:

<script language="JavaScript" type="text/javascript">
      function ToggleDisplay(id)
      {
       // alert(id);
        var elem = document.getElementById(id);
        if (elem)
        {
          if (elem.style.display != 'block')
          {
            elem.style.display = 'block'
            elem.style.visibility = 'visible'
          }
          else
          {
            elem.style.display = 'none'
            elem.style.visibility = 'hidden'
          }
        }
      }
    </script>
    
    <style type="text/css">
        .header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
                   background-color:#cccccc; font-family: Verdana; }
        .details { display:none; visibility:hidden; background-color:#eeeeee;
                   font-family: Verdana; }
    </style>  

Here's the div:

<div id='div<%# DataBinder.Eval(Container.DataItem,"City").ToString() %>' class="details">

Any ideas on why this isn't working?  I've tested in the JS code to make sure it was getting the right ID so that part is set.