記事を折りたたみ、クリックすることで表示することをJavaScriptを使って実現することができる。

＜準備＞

(1)javascriptで次の折りたたみ制御ロジックを<heder>～</heder>に入れておく。

<script type="text/javascript">
function showPlagin(idno)
{
  var pc = ('PlagClose' + (idno));
  var 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>

(2)ページ内で折りたたみ内容を表示したい箇所にはサンプルで示しているように、div id=”PlagOpen1″に折りたたみ状態に表示したい内容。div id=”PlagClose1″に折りたたまれていない状態に表示したい内容を記述する。

＜サンプル：「続きを読む」をクリックすると折りたたみの記述内容が表示される＞

<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>