关于网页关闭弹出框问题

点击关闭的时候不能实现关闭
关键代码
<ul class="icon" id="icon">
  <li id="item1" onclick="show_tip(1);">
  <div id="text1" class="static">
  梦动物<br />
  Animal
  <form action="" method="post" name="shengxiaopeidui">
  <div id="tip">
  <input id="dreamtype" name ="dreamtype" value ="" type ="hidden" />
  选择动物<br />
  <select id="dreamtype1" name="dreamtype1">
  <option value="0">请选择</option>
<option value="1">鸟</option>
<option value="2">猫</option>
  </select>
  <input type="submit" onclick="return godream(1);" class="button" value="查看" 

name="submit">
  </div>
  <div class="close-button" onclick="hidden_tip(1)">关闭</div>
  </div>
  </li>
</ul>


js*********************
function show_tip(number){
for(var i=1;i<9;i++){
  document.getElementById('item' + i).className='';
}
document.getElementById('item' + number).className='hover';
}
function hidden_tip(number){
document.getElementById('item' + number).className='';
}




那个show_tip()的JS函数可用，，，能弹出一个框 可是hidden_tip()就不能实现预期效果，点击关闭 没反应

document.getElementById('item' + number).style.display='none';

或者
document.getElementById('item' + number).className='hide';

.hide{display:none}

先谢谢下。。。LS的方法用过，因为是一组<li> 设置display=none之后，会出现一个问题，每单击一次关闭，<li>的图标就消失一个。。。

你的关闭是什么意思呢+-这种折叠？

其实就是展开 然后还原