点击按钮，内容隐藏，再点击一下，然后内容又显示了，这种效果怎么做？然后默认的是隐藏的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>显示隐藏</h1>
<p id="con">
做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网提验，JavaScript是必不可少的工具。
</p>
<input type="button" onclick="hidetext()" value="不显示段落内容"/>
<input type="button" onclick="showtext()" value="显示段落内容"/>
<script>
function hidetext(){
document.getElementById("con").style.display="none";
}
function showtext(){
document.getElementById("con").style.display="block";
}
</script>
</body>
</html>
这个点击出来的时候有点太突然，能在这个基础上加一点缓动的效果吗？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"></meta>
<title>display演示</title>
<script type = "text/javascript">
function clk() {
var text = document.getElementById("text");
var clk_btn = document.getElementById("clk_btn");
var data = text.getAttribute('data');
if (data == 1) {
text.style.display = "none";
text.attributes["data"].nodeValue = 2;
clk_btn.attributes["value"].value = "显示";
} else {
text.style.display = "block";
text.attributes["data"].nodeValue = 1;
clk_btn.attributes["value"].value = "隐藏";
}
}
</script>
</head>
<body>
<p id = "text" data="1">display演示文本</p>
<input id = "clk_btn" type = "button" value = "隐藏" onclick = "clk()"/>
</body>
</html>
这个要点击两个按钮，我要的是一个，不过我已经解决了，还是谢谢你。。
<script type="text/javascript">
function Show_1(){
var mychar = document.getElementById("show1");
if(mychar.style.display=="block"){
mychar.style.display='none';
}else{
mychar.style.display='block';
}
}
</script>
<body>
<div><button onclick="Show_1()">快件查询</button> </div>
<div id="show1" style="display:none">
<a href="#"><img src="img/2.png" class="img1">按快件号查询</a><br/>
<a href="#"><img src="img/2.png" class="img1">按姓名查询</a><br/>
<a href="#"><img src="img/2.png" class="img1">按电话号查询</a>
</div>
</body>