「JavaScriptで記事の追記を折りたたみ」違う使い方

まず以前紹介したものはこんな感じです。 次に今回紹介するのがこちら。 方法は簡単、クリックしてから表示される部分のCSSをいじってあげるだけです。おさらいということでまずはJavaScriptから。

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

次にbody部分です。ポイントは<div id="open">で、あとで紹介するようにCSSを指定してあげると完成です。

<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 id="open">
    ここに記事の内容を記入します。 
  </div>

<!-- 記事内容終わり -->

</div>

CSSはこんな感じです。

#open{
    position:absolute;
    z-index:1;
    width:400px;
    padding:10px;
    text-align:left;
    background-color:#336699;
    color:#ffffff;
}

私が実際設置してみたサイトはこちらです。右上のその他のメニューというところです。
「FXexpress」