スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

以前「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
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。