記事を折りたたむ 【Java】

このコーナーで使用している「記事を折りたたむ」javaコードを紹介します。

「記事の折りたたみ」は多くのサイトが使用しており、その方法も様々です。

レンタルブログなどでは、あらかじめ「折りたたむ」前提でシステムが組まれています。

ここでは、データベースやAjaxを使用しない簡単な手法を2種類ご紹介します。

■その１

まずはJavaScript
head内記述、または外部ソースから呼び出してください。下記記述はhead内を想定してます。

<script type="text/javascript">
<!--
function hirakegoma(idno){
pc = ('Close' + (idno));
po = ('Open' + (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>

次にbody部分です。

<div id="Open1">
<p><a href="#" title="続きを読む" onclick="hirakegoma(1);return false;">続きを読む</a></p>
</div>
<div id="Close1" style="display: none">
<p><a href="#" title="折りたたむ" onclick="hirakegoma(1);return false;">折りたたむ</a></p>
<!-- 記事内容始まり -->
ここに記事の内容を記入します。 
<!-- 記事内容終わり -->
</div>

「Close」「Open」「hirakegoma」に続く「数字」部分を書き換えると１ページで何回も使用できます。

ただ・・・・上記[その１]は簡単で良いんですが

リンク先を空白にしている（a href="#"）んで、w3c的には×です。

簡単に設置したい方はこれで良いと思いますが

綺麗なソースじゃなきゃ嫌だぁ～って方には不向きです。

・・・・で、次にご紹介するのは、リンク先を空白（a href="#"）を指定しない方法です。

■その２
まず、外部jsを作成してください。

名前はお好きな名前で・・・ココでは仮に「oritatami.js」とします。

function expand(URI,SUB,EXP){
  if(document.getElementById) {
    if(document.getElementById(SUB).style.display) {
      if(URI != 0) {
        document.getElementById(SUB).style.display = "block";
        document.getElementById(EXP).style.display = "none";
      } else {
        document.getElementById(SUB).style.display = "none";
        document.getElementById(EXP).style.display = "block";
      }
    } else {
      location.href = URI;
      return true;
    }
  } else {
    location.href = URI;
    return true;
  }
}

テキストファイルに次のコードを記述して「oritatami.js」で保存。

head内にJavaScript読み込み記述。

HTML側記述は

<p id="oritatami_01">
<a href="#oritatami_01" 
onclick="expand('#','tsuzuki_01','oritatami_01');return false;" 
onkeypress="expand('#','tsuzuki_01','oritatami_01');return false;">
続きを表示する
</a>
</p>
<div id="tsuzuki_01" style="display:none">
<p id="kisai_01" >
<a href="#oritatami_01" 
onclick="expand(0,'tsuzuki_01','oritatami_01');return false;" 
onkeypress="expand(0,'tsuzuki_01','oritatami_01');return false;">
折りたたむ
</a>
</p>
<!-- 記事内容始まり -->
ここに記事の内容を記入します。 
<!-- 記事内容終わり -->
</div>

となります。

その１と同様、「oritatami_」「tsuzuki_」「kisai_」に続く「数字」部分の変更で何カ所にも設置できます。

お試しアレ。