今天修改一個zblog模板的時候，用到了默認隱藏部分區域文字，點擊會顯示全部，不需要使用jQuery支持，即插即用的一段代碼！
圖1特效代碼：
<!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=gb2312" />
<title>無標題文檔</title>
</head>
<body>
<style>
#content,#intro{
font: 13px/25px;
width: 200px;
height: 50px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#content{ height:70px;}
#intro {
color: #036;
font:12px;
border: 4px #ccc double;
border-top:0;
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script>
function shoppingcat(){
var id = document.getElementById("content");
var key = document.getElementById("key").innerText;
if(key==="關閉"){
id.style.height=70+"px";
document.getElementById("key").innerText="展開";
}else{
id.style.height=500+"px";
document.getElementById("key").innerText="關閉";
}
}
</script>
<div id="content">
孤雁兒
<br><br>
世人作梅詞，下筆便俗。予試作一篇，乃知前言不妄耳。<br><br>
藤床紙帳朝眠起，<br>
說不盡、無佳思。<br>
沈香煙斷玉爐寒，<br>
伴我情懷如水。<br>
笛聲三弄，<br>
梅心驚破，<br>
多少春情意。<br><br>
小風疏雨蕭蕭地，<br>
又催下、千行淚。<br>
吹簫人去玉樓空，<br>
腸斷與誰同倚？
一枝折得，<br>
人間天上，<br>
沒個人堪寄。
</div>
<div id="intro" ><hr>作者：李清照<span id="key" onclick="shoppingcat();">展開</span><br>來源
：中國詩辭網</div>
</body>
</html>圖2：Js點擊展開文字 再次點擊隱藏（折疊）文字代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html>
<head>
<title>點擊展開文字隱藏文字JS代碼</title>
<style type="text/css">
* {
margin:0; padding:0; border:0;
}
ul {
list-style-type:none;
}
li {
margin:10px;
width:200px;
border:4px double #ccc;
background:#eee;
}
li .main,li .intro {
margin:5px 5px 0 5px;
font-size:12px;
}
li .main {
height:25px;
overflow:hidden;
line-height:22px;
}
#main1 {
height:380px;
}
li h3 {
margin:0 5px 5px;
}
li p{
margin:8px 0;
font-size:14px;
color:#111;
}
li .mainf {
line-height:15px;
font-size:12px;
color:#333;
}
li .intro {
padding:3px 0 0;
color:#036;
line-height:18px;
border-top:1px dotted #366;
}
li .key {
float:right;
margin-top:-20px;
color:#900;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>
<div class="main" id="main1">
<h3>孤雁兒</h3>
<p class="mainf">世人作梅詞，下筆便俗。予試作一篇，乃知前言不妄耳。</p>
<p>藤床紙帳朝眠起，
<br />說不盡、無佳思。
<br />沈香煙斷玉爐寒，
<br />伴我情懷如水。
<br />笛聲三弄，
<br />梅心驚破，
<br />多少春情意。</p>
<p>小風疏雨蕭蕭地，
<br />又催下、千行淚。
<br />吹簫人去玉樓空，
<br />腸斷與誰同倚？
<br />一枝折得，
<br />人間天上，
<br />沒個人堪寄。</p>
</div>
<div class="intro">
作者：李清照
<span class="key" onclick="fn(this,1)">折疊</span>
</div>
</li>
<li>
<div class="main" id="main2">
<h3>孤雁兒</h3>
<p class="mainf">世人作梅詞，下筆便俗。予試作一篇，乃知前言不妄耳。</p>
<p>藤床紙帳朝眠起，
<br />說不盡、無佳思。
<br />沈香煙斷玉爐寒，
<br />伴我情懷如水。
<br />笛聲三弄，
<br />梅心驚破，
<br />多少春情意。</p>
<p>小風疏雨蕭蕭地，
<br />又催下、千行淚。
<br />吹簫人去玉樓空，
<br />腸斷與誰同倚？
<br />一枝折得，
<br />人間天上，
<br />沒個人堪寄。</p>
</div>
<div class="intro">
作者：李清照
<span class="key" onclick="fn(this,2)">展開</span>
</div>
</li>
</ul>
<script type="text/javascript">
var h = new Array(0,380,25,25,25);
var tf = new Array(false,true,false,false,false);
var minheight = 25;
var maxheight = 380;
function fn(likey,tag){
if (tf[tag]){
if (h[tag]>=minheight){
document.getElementById("main"+tag).style.height = h[tag] + "px";
setTimeout(function(){fn(likey,tag)},1);
h[tag] -= 10;
} else {
likey.innerHTML = "展開";
tf[tag] = !tf[tag];
h[tag] += 10;
}
} else {
if (h[tag]<=maxheight){
document.getElementById("main"+tag).style.height = h[tag] + "px";
setTimeout(function(){fn(likey,tag)},1);
h[tag] += 10;
} else {
likey.innerHTML = "折疊";
tf[tag] = !tf[tag];
h[tag] -= 10;
}
}
}
</script>
</body>
</html>雖然這個即插即用的點擊顯示全部，點擊隱藏比較好用，但還不是最佳方案，只是一個不需要jQuery支持的代碼而已，稍后會分享更多以及帶更多效果的點擊顯示 隱藏特效代碼！