用js实现 文章，介绍，展览等 展开收缩效果
方法一：
<script>
$(function () {
$("#btn").toggle(
function () {
$(this).text("收起选项-");
$("#hpn").show();
},
function () {
$(this).text("展开选项+");
$("#hpn").hide();
}
)
})
</script>方法二：
<script type="text/javascript">
window.onload = function () {//加载完毕
var hidediv = document.getElementById('hpn'),
btn = document.getElementById('btn'),
hflag = 1;//标记是否隐藏
btn.onclick = function () {
if (hflag) {//当前为收起状态，展开函数
hidediv.style.display = "block";
btn.innerHTML = "收起选项-";
hflag = 0;
} else {//当前为展开状态，收起函数
hidediv.style.display = "none";
btn.innerHTML = "展开选项+";
hflag = 1;
}
}
}
</script>整体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.hpn {
display: none;
}
</style>
</head>
<body>
<div id="pn" class="pn">
<p>分类：全部 电影 电视剧 综艺</p>
<div id="hpn" class="hpn">
<p>地区：大陆 香港 美国 韩国 法国 英国</p>
<p>类型：武侠 喜剧 冒险 战争 动画</p>
<p>时间：2016 2015 2014 2013 2012 2011 2010 </p>
</div>
</div>
<a href="javascript:void(0);" id="btn" class="btn">展开选项+</a>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<!-- <script>
$(function () {
$("#btn").toggle(
function () {
$(this).text("收起选项-");
$("#hpn").show();
},
function () {
$(this).text("展开选项+");
$("#hpn").hide();
}
)
})
</script> -->
<script type="text/javascript">
window.onload = function () {//加载完毕
var hidediv = document.getElementById('hpn'),
btn = document.getElementById('btn'),
hflag = 1;//标记是否隐藏
btn.onclick = function () {
if (hflag) {//当前为收起状态，展开函数
hidediv.style.display = "block";
btn.innerHTML = "收起选项-";
hflag = 0;
} else {//当前为展开状态，收起函数
hidediv.style.display = "none";
btn.innerHTML = "展开选项+";
hflag = 1;
}
}
}
</script>
</body>
</html>