javascript onmouseover hide a div block

SO this is my code so far:

JS:

        <script type="text/javascript">
             function Hide(srcField)
             {
                 var x = srcField.getAttribute('name');
                 var string = new RegExp("hide_ID",'gi');
 
                 switch (x)
                 {
                     case "1":
                     var dataRows= document.getElementsByID("obrazovanje");
                     alert (dataRows[0].innerHTML);
                     dataRows[0].className.replace('',string);
                     break;
                     case "2":
                     var dataRows= document.getElementsByID("rad_iskustvo");
                     dataRows[0].className.replace('',string);
                     break;
                     case "3":
                     var dataRows= document.getElementsByID("strani_jezici");
                     dataRows[0].className.replace('',string);
                     break;
                     case "4":
                     var dataRows= document.getElementsByID("znanja_vjestine");
                     dataRows[0].className.replace('',string);
                     break;
                     case "5":
                     var dataRows= document.getElementsByID("osobine_interesi");
                     dataRows[0].className.replace('',string);
                     break;
                 }
             }
     </script>
 

CSS:

.hide_ID,
 {
 display:none
 }
 

HTML:

    <a name="1"><h4><span name="1" onmouseover="Hide(this)">OBRAZOVANJE:</span></h4></a>
 
     <div ID="obrazovanje">
     <ul>
     <li>2001.-2005.  elektrotehnicar</li>
     <li>2009.-2012.   racunarstvo</li>
     </ul>
     </div>
 

the idea is that i want to hide the div block when i hover over the title that's in h4, but it doesn't seem to hide it... any ideas?
i started using replace but it still didn't work, before that it was just 'dataRows[0].className = "hide_ID"' but that didn't work either.

EDIT1:

so i changed the JS to:

                var x = srcField.getAttribute('name');
 
                 switch (x)
                 {
                     case "1":
                     var dataRow= document.getElementByID("obrazovanje");
                     dataRow.className += "hide_ID";
                     break;
 

the rest of the JS is also edited, but i didn't feel the need to paste it all)
but still no result.

also tried to change display:none to display:block but now results.

EDIT2:

the JS now looks like this:

        function Hide(id)
             {
                 switch (id)
                 {
                     case "obrazovanje":
                     var dataRow= document.getElementByID("obrazovanje");
                     if ( dataRow.className.indexOf('hide_ID') == -1 ) dataRow.className += ' hide_ID';
                     else dataRow.className = 'obrazovanje';
                     break;
 ...
 

and the html is:

    <a name="1"><h4 class="menu" onmouseover="Hide('obrazovanje')">OBRAZOVANJE:</h4></a>
 
     <div ID="obrazovanje" class="content">
     <ul>
     <li>2001.-2005. elektrotehnicar</li>
     <li>2009.-2012.   racunarstvo</li>
     </ul>
     </div>
 

and still it wont budge...

---