Trouble hiding/showing divs in using DOM/js/css

Question

I am trying to make a debugger that will be dynamiaclly created with some variables. The names on the left div need to show a div for the corresponding variables Description,Variable ID, and initial Value as well as another div that will show history and lock status when variables are updated later. Where I am having trouble is properly adding the show/hide to the dom I think. Everything starts hidden and then when I click a name the Variables for that name show up but the next click doesn't hide the values from the former. Also any cleanup/optimization advice?

<script type="text/javascript">
    var variableIDArray = {};

    function loadVariables(variables) {
        if (typeof variables != "object") { alert(variables); return; }
        var namearea = document.getElementById('namearea');
        var description = document.getElementById('description');
        var varid = document.getElementById('varid');
        var initialvalue = document.getElementById('initialvalue');
        var valuelock = document.getElementById('valuelock');

        for (var i = 0; i < variables.length - 1; i++) {

            var nameDiv = document.createElement('div');
            nameDiv.id = variables[i].variableID + "namearea";
            nameDiv.className = "nameDiv";
            nameDiv.onclick = (function (varid) {
                return function () { showvariable(varid); };
            })(variables[i].variableID);
            nameDiv.appendChild(document.createTextNode(variables[i].name));
            namearea.appendChild(nameDiv);

            var descriptionDiv = document.createElement('div');
            descriptionDiv.id = variables[i].variableID + "description";
            descriptionDiv.className = "descriptionDiv";
            descriptionDiv.appendChild(document.createTextNode("Description : " + variables[i].description));
            description.appendChild(descriptionDiv);

            var varidDiv = document.createElement('div');
            varidDiv.id = variables[i].variableID + "varid";
            varidDiv.className = "varidDiv";
            varidDiv.appendChild(document.createTextNode("Var ID : " + variables[i].variableID));
            varid.appendChild(varidDiv);

            var initialvalueDiv = document.createElement('div'); ;
            initialvalueDiv.id = variables[i].variableID + "initialvalue";
            initialvalueDiv.className = "initialvalueDiv";
            initialvalueDiv.appendChild(document.createTextNode("Initial Value : " + variables[i].value));
            initialvalue.appendChild(initialvalueDiv);

            var valuelockDiv = document.createElement('div');
            valuelockDiv.id = variables[i].variableID + "valuelock";
            valuelockDiv.className = "valuelockDiv  ";
            valuelockDiv.appendChild(document.createTextNode("Value : " + variables[i].value));
            valuelockDiv.appendChild(document.createTextNode("Lock : " + variables[i].locked.toString()));
            valuelock.appendChild(valuelockDiv);

            variableIDArray[variables[i].variableID];
        }


    };
    function showvariable(varid) {
        for (v in variableIDArray)
            hide(variableIDArray[v]);
        show(varid + "description");
        show(varid + "varid");
        show(varid + "initialvalue");
        show(varid + "valuelock");
    }
    function show(elemid) {
        document.getElementById(elemid).style.display = "block";
    }
    function hide(elemid) {
        document.getElementById(elemid).style.display = "none";
    }

Answer 1

Yes. jQuery. Will reduce your code to about 6 lines. :) http://jquery.com