例：默认div隐藏，点击按钮时出现，再点击时隐藏。
<a href="#" onclick="f(‘ycbc‘)"; >控制按钮</a>
<div id="ycbc" style="display:none">隐藏的内容</div>
解决方法一：javascript
利用onclick事件调用f(‘ycbc‘)函数，参数为隐藏的内容div的id,在函数加入钮时出现，再点击时隐藏代码，如下：
function f(a){
var obj = document.getElementById(a);
if(obj.style.display==""){
obj.style.display = "none";
}else{
obj.style.display = "";
}
}
注意：隐藏的内容div要加style="display:none"
a标签的KENG——a标签的href="#" 一定要加#，否则，点击后想当于刷新本页。加入的效果出不来。
解决方法二：jquery
<script src="../js/jquery.min.js"></script>
注意：使用jquery记得要引入jquery.js
<a href="#" " id="butonclick">点击按钮</a> <div id="ycxg" style="display: none;">隐藏的内容</div>
原理：查找id#butonclick调用onclick事件，判断隐藏的内容的id="ycxg"的CSS样式，当display=none,隐藏的内容的id="ycxg"的CSS样式display=block，否则display=none；
$(document).ready(function() {
$(‘#butonclick‘).click(function(){
if($("#ycxg").css(‘display‘)==‘none‘){
$("#ycxg").css("display","block");
}else{
$("#ycxg").css("display","none");
}
})
});
或使用jquery显示隐藏效果
$(document).ready(function() {
$(‘#butonclick‘).click(function(){
$("#ycxg").toggle();
})
});
扩展：
$("#hide").click(function(){
$("p").hide(); //隐藏
});
$("#show").click(function(){
$("p").show(); //显示
});
原文：http://www.cnblogs.com/wuss/p/7879613.html