jQueryを使った記事の開閉

当ブログでは、開閉機能を色んな箇所で使っています。
  □ 続きを読む
  □ コメントリスト表示(何故かタブルクリックじゃないと開かない)
  □ CM・TBのスクロールバー
  □ サイドバーのタイトル表示

今回は、jQueryを使った記事の開閉を行う方法を紹介します。
 下記の場合に使えるのではないかと思います。
 ・ 記事が長文となりコンパクトに纏める場合
  (例) 『ATHENA-アテナ-』 雑感 【13話以降の内容を見る】
 ・ ネタバレ隠し
[導入方法] FC2の場合
(1)jQueryの導入
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 ajaxのライブラリ使用なのでファイル名は「jquery.min.js」のままで構いません。
 Ver はなるべく新しいものが良いかと思います。

(2)スクリプト
 <!--topentry-->
 <script type="text/javascript">
 /* 記事開閉 */
 $(function(){
 $("div.open").click(function(){
 $("div.dtl").slideToggle("fast");
 });
 });
 </script>
 <!--/topentry-->
 各記事内だけの使用でしたら、<!--topentry--><!--/topentry-->でブロック指定
 開閉速度は「fast」と「slow」の指定が出来ます。

(1)(2)の記述位置は<head>内が望ましいようですが、<body>直下でも動くようです。
[ サンプル ] ← ここをクリックして見て下さい。


(3)本文
 <div class="open" style="cursor:pointer;">→隠した記事を見る</div>
 <div class="dtl" style="display:none;">隠す部分。ココに隠したい内容を書く。</div>
 青字はカーソルの形状をハンドマークに変え、リンクを判り易くしています。
 赤字は「隠した状態」で表示する場合です。最初から表示状態にする場合は削除して下さい。
 元の状態に戻す場合は、同じ箇所をもう一度クリックします。

参考サイト:記事のネタ隠し 開閉スクリプト
関連記事
【スポンサーリンク】

最終更新日時: 2018年03月28日(水)21:46:42
ブログパーツ

Comment 0

There are no comments yet.

Leave a comment