http://jsbin.com/cikuga/edit?html,css,output   IE 호환을 위해 jQuery를 사용했다. 안해도 되지만 이 편이 그래도 좀 읽기 쉽지 않나 싶다.  접히고 펼쳐지는 트리구조를 만드는 데 있어 핵심 아이디어는 같은 깊이에 인접한(sibling ) 요소들끼리는 radio button을 사용하면 된다는 것이다.   가령   <input type="radio" name="group1">  <input type="radio" name="group1">  <input type="radio" name="group1">   이렇게 했을 경우 같은 이름(name)을 가지고 있으므로 셋 중 하나만 radio 버튼이 들어오고   <input type="radio" name="group1">  <input type="radio" name="group2">  <input type="radio" name="group2">  <input type="radio" name="group2">    <input type="radio" name="group1">  <input type="radio" name="group1">   이와 같이 구성하면 group2는 group2끼리 group1은 group1끼리 각각 구성할 수 있다.  따라서 각각의 radio button에 대한 id가   1    1-1    1-2  2    2-1      2-1-1      2-1-2  3   일 경우엔 1,2,3을 top  1-1, 1-2는 1  2-1은 2 ...
Meteor evangelist, IoT, Renoise, Lua, Javascript, Coffeescript