Div可见性切换不起作用

Question

I'm making a tree structure using html and css. This is the final structure that I should reach: http://jsfiddle.net/yrE7N/1/

What I need is, on clicking a node, its children node will appear.

I've done this till now:

JS Fiddle: http://jsfiddle.net/ZTkLg/11/

I've used this JS function

var _hidediv = null;
    function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}

The thing is, the JS function doesn't seem to be toggling the visibility of the div stage-two .

I've used this function before on this page: http://leonardorestaurant.in/menu and it worked but I can't figure the problem out in this case.

Answer 1

Try

<a href=# onclick="showdiv('two');">Some text here</a>

and

var flag = true;
function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = flag ? 'none' : 'block';
    flag = !flag;
}

Demo: Fiddle

Answer 2

The console in my browser prints out :

Uncaught TypeError: Cannot read property 'style' of null 

Which means that here :

div.style.display = 'block';

div is not the result you think it should be... That tells us that id is not what we think here :

var div = document.getElementById(id);

Which I confirmed by using :

console.log(id);

inside your function.

The id value is actually the <div id="two">

So, basically you already have the element you're looking for.

However, you've got bigger problems, which is that you need a toggle function, I'm just guessing. Try using this :

function toggleDiv(id) {
    var el = document.getElementById(id);
    var newDisplayValue = "none";
    if ( el.style.display && el.style.display === "none" ) {
        newDisplayValue = "block";
    }
    el.style.display = newDisplayValue;
}

and change to this :

<a href=# onclick="toggleDiv('two');">

see it here