dynamically generate javascript expandable list

I want to do something such as when I click a button on the webpage, it will show an expandable list, instead of showing the expandable开发者_如何学JAVA list from the beginning. What I did is using the library mktree.js and mktree.css

<script src="mktree.js" language="javascript"></script>
<link rel="Stylesheet" href="mktree.css" />

then creating a static tag and a button:

<ul class="mktree" id="tree"></ul>
<button type="button" onclick="showTree()">Show</button>

in the showTree() function, I built the inner content of the tree and write it to the innerHTML value of the tag:

response = '\n<li class="liOpen"><span class="bullet">&nbsp;</span>Parent';
response += '\n<ul>';
response += '\n<li class="liBullet"><span class="bullet">&nbsp;</span>child 1</li>';
response += '\n<li class="liBullet"><span class="bullet">&nbsp;</span>child 2</li>';
response += '\n</ul>';
response += '\n</li>\n';
document.getElementById("tree").innerHTML = response;

but this didn't work. It showed a list, but not expandable/colapsable.

Do you know any way to work around this?

Thanks.

You need to add a function that does the hiding.

Every time you click the "Show" button, the #tree node's html will be replaced by the html in the showTree function.

The easiest way to do this would be to have the last action of the showTree function hide the "Show" button and unhide a "Hide" button. When the user clicks on the Hide button, it would trigger hideTree or whatever you named your new function, and collapse/hide the list.