記事を途中で折りたたむ方法としては、ブログの「続きを読む」や、WORDLRESS(ワードプレス)の「続きを読む」(moreタグ)がありますが、これらはいずれも別のページへのリンクです。
そうではなく、1つページ内で文章が長い場合、途中で記事を折りたたむ方法はないか探したところ、「JavaScriptで記事の追記を折りたたむ方法」がありました。
JavaScript
下記のソースをhead内に記述します。
<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>
「続きを読む」ソース
記事を折りたたみたい箇所に次のソースを記述します。
☆の次の言葉は任意の言葉を入れます。
<div id="PlagOpen1">
<p>
<a href="#" title="続きを読む" onclick="showPlagin(1);return false;">☆続きを読む</a>
</p>
</div>
<div id="PlagClose1" style="display: none">
<p>
<a href="#" title="折りたたむ" onclick="showPlagin(1);return false;">☆折りたたむ</a>
</p>
※ここに折りこんだ記事の内容を記入します。
</div>
実例
実際に上記ソースを記事内に記述すると次のようになります。