Spoiler Revealer


Description: Read moreコンテンツを実装。といってもAjaxで呼び出す等ではなく、spanタグで囲ったテキストを最初は非表示させておく、というものです。
Sample: demo
Tutorial: Fade-in Spoiler Revealer
License: -

Sample

「続きを読む」コンテンツを実装するコードです。ページ推移せずその場に表示します。クリックするとこのようにフェードインしながらコンテンツが表示されます。

Note

$(document).ready(function() { 

		$("span.spoiler").hide();

		 $('<a class="reveal">続きを読む &gt;&gt;</a> ').insertBefore('span.spoiler');

		$("a.reveal").click(function(){
			$(this).parents("p").children("span.spoiler").fadeIn(2500);
			$(this).parents("p").children("a.reveal").fadeOut(600);
		});

jQueryと上記のようなコードで実装出来ます。

Related snippet :

  • Description: クリックで画像が切り替わるシンプルなビューアです。マウスを乗せるとツールチップも出現します。キャプションも実装可能でクロスブラウザで動作可能です。コ ...
  • Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。 Sample: demo ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: ページ内アンカーリンクをグラフィカルな目次にして表示します。縦長のページ内の目次として使うことができそうですね。jQueryUIを必要とします。 ...