記事を途中で折りたたむ方法

記事を途中で折りたたむ方法としては、ブログの「続きを読む」や、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>

実例

実際に上記ソースを記事内に記述すると次のようになります。


ワードプレスの関連記事

このページの先頭へ