javascript onmouseover hide a div block

Question

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...

FINAL:

this worked:

JS:

    <script type="text/javascript">
        function Hide(id)
            {
                switch (id) {
                        case 1:
                            document.getElementById("1").className = "hide_ID";
                            break;
                        case 2:
                            document.getElementById("2").className = "hide_ID";
                            break;
                        case 3:
                            document.getElementById("3").className = "hide_ID";
                            break;
                        case 4:
                            document.getElementById("4").className = "hide_ID";
                            break;
                        case 5:
                            document.getElementById("5").className = "hide_ID";
                            break;
                    }

            }

        function Show(id)
            {
                switch (id) {
                    case 1:
                        document.getElementById("1").className = "1";
                        break;
                    case 2:
                        document.getElementById("2").className = "2";
                        break;
                    case 3:
                        document.getElementById("3").className = "3";
                        break;
                    case 4:
                        document.getElementById("4").className = "4";
                        break;
                    case 5:
                        document.getElementById("5").className = "5";
                        break;
            }
        }
    </script>

HTML:

    <a name="1_a"><h4 class="menu" onmouseover="Hide(1)" onmouseout="Show(1)">OBRAZOVANJE:</h4></a>

    <div ID="1" class="content">
    <ul>
    <li>2001.-2005.  elektrotehnicar</li>
    <li>2009.-2012.   racunarstvo</li>
    </ul>
    </div>

CSS:

.hide_ID
{
display:none
}

thx guys.

Answer 1

if you can use jQuery, just use $("#divname").addClass("hide_ID");

Answer 2

As I understand, your goal is to hide the associated div tag when the h4 element is hovered over. One way to do this is to use a combination of javascript, css and naming conventions. Consider...

<script type="text/javascript">
function Hide(id) {
    var elt = document.getElementById('obrazovanje');
    if ( elt.className.indexOf('hide_ID') == -1 ) {
        elt.className += ' hide_ID'; // from your css example
    } else {
        elt.className = '';
    }
}
/* In jQuery as mentioned in other answers it's even easier (and offers some other cool ways too (highly recommended if it fits your purposes) */
 function jHide(id) {
     $('#' + id ).toggleClass('hide_ID');
 }
</script>

<h4 class="menu" onmouseover="Hide('obrazovanje');">obrazovanje</h4>

...
<div id="obrazovanje" class="content">
</div>

Answer 3

Try this one. and change the switch case statement as per your requirement.

switch (x) {
        case "1":
            document.getElementById("obrazovanje").className += "hide_ID";
            break;
        case "2":
            document.getElementById("rad_iskustvo").className += "hide_ID";
            break;
        case "3":
            document.getElementById("strani_jezici").className += "hide_ID";
            break;
        case "4":
            document.getElementById("znanja_vjestine").className += "hide_ID";
            break;
        case "5":
            document.getElementById("osobine_interesi").className += "hide_ID";
            break;
    }

with this style

.hide_ID
{
display:none;
}

Answer 4

instead of replacing className with a reg exp try appending new class to className string. Also getElementById() returns single html instance. And also id attribute must be unique for the entire document.

var dataRows= document.getElementById("obrazovanje");
dataRows.className += " hide_ID"