示例：http://www.cnblogs.com/endv/p/4018554.html#endv9
目錄
1. 目錄
2. 目錄
3. 目錄
4. 目錄
0000
5. 目錄 原代碼在這里（展開）
0000
代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div> <div id="endv" style="color: #ff0000;" onclick="document.all.endv0_1.style.display = (document.all.endv0_1.style.display == 'none') ? '' : 'none'" dir="ltr">目錄</div> <!--<div id="endv1">--> <div id="endv0_1"> <a href="#endv1">1.目錄1 </a><br /> <a href="#endv2">2.目錄</a><br /> <a href="#endv3">3.目錄 </a><br /> <a href="#endv4">4.目錄 </a><br /> <a href="#endv5">5.目錄 </a><br /> <a href="#endv6">6.目錄 </a><br /> <a href="#endv7">7.目錄 </a><br /> <a href="#endv8">8.目錄 </a><br /> <a href="#endv9">9.目錄 </a><br /> <a href="#endv10">10.目錄 </a><br /> <a href="#endv11">11.目錄 </a><br /> </div> <!-- endv1 --> <!--<div id="endv4">--> <div id="endv1" style="color: #ff0000;" onclick="document.all.endv1_1.style.display = (document.all.endv1_1.style.display == 'none') ? '' : 'none'" dir="ltr" ><h2 aria-atomic="false">1. 目錄</h2></div> <div id="endv1_1"> 插入內容 </div> <!-- endv1 --> <!--<div id="endv4">--> <div id="endv2" style="color: #ff0000;" onclick="document.all.endv2_1.style.display = (document.all.endv2_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">2. 目錄</h2></div> <div id="endv2_1"> 0000 </div><!-- endv1 --> <!--<div id="endv4">--> <div id="endv3" style="color: #ff0000;" onclick="document.all.endv3_1.style.display = (document.all.endv3_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">3. 目錄</h2></div> <div id="endv3_1"> 0000 </div><!-- endv1 --> <!--<div id="endv4">--> <div id="endv4" style="color: #ff0000;" onclick="document.all.endv4_1.style.display = (document.all.endv4_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">4. 目錄</h2></div> <div id="endv4_1"> 0000 </div><!-- endv1 --> <!--<div id="endv5">--> <div id="endv5" style="color: #ff0000;" onclick="document.all.endv5_1.style.display = (document.all.endv5_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">5. 目錄</h2></div> <div id="endv5_1"> 0000 </div><!-- endv1 --> <!--<div id="endv6">--> <div id="endv6" style="color: #ff0000;" onclick="document.all.endv6_1.style.display = (document.all.endv6_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">6. 目錄</h2></div> <div id="endv6_1"> 0000 </div> <!--<div id="endv7">--> <div id="endv7" style="color: #ff0000;" onclick="document.all.endv7_1.style.display = (document.all.endv7_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">7. 目錄</h2></div> <div id="endv7_1"> 0000 </div> <!--<div id="endv8">--> <div id="endv8" style="color: #ff0000;" onclick="document.all.endv8_1.style.display = (document.all.endv8_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">8. 目錄</h2></div> <div id="endv8_1"> 0000 </div> <!--<div id="endv1">--> <div id="endv9" style="color: #ff0000;" onclick="document.all.endv9_1.style.display = (document.all.endv9_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">9. 目錄</h2></div> <div id="endv9_1"> 0000 </div> <!--<div id="endv10">--> <div id="endv10" style="color: #ff0000;" onclick="document.all.endv10_1.style.display = (document.all.endv10_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">10. 目錄</h2></div> <div id="endv10_1"> 0000 </div> <!--<div id="endv11">--> <div id="endv11" style="color: #ff0000;" onclick="document.all.endv11_1.style.display = (document.all.endv11_1.style.display == 'none') ? '' : 'none'" dir="ltr" aria-atomic="true"><h2 aria-atomic="false">11. 目錄</h2></div> </div> </body> </html>
6. 目錄
0000
7. 目錄
0000