隠しておいた要素をクリックで表示「Spoiler」
当ページのリンクには広告が含まれています。
スポンサーリンク
隠しておいた要素をクリックで表示！といった効果をWeb上に実装するプラグイン「Spoiler」を紹介します。
jQueryプラグイン「Spoiler」
指定した要素をクリックで表示することができるので、テキストや画像やらテーブル……などなんでも！指定することができます。
オプションでは、クリックする「ボタン」のテキストやクラスなどを指定することができます。
スポンサーリンク
それでは、デモページのをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Spoiler のデモでーす。">
<title>Spoiler - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.spoiler.js"></script>
</head>
<body>
<h1>Spoiler のデモでーす。</h1>
<div class="spoiler">
<p>すると、このように指定した要素が表示されます。</p>
<img src="images/purple.png" />
</div>
<script>
$(".spoiler").spoiler({
buttonName : "ここをクリック！",
});
</script>
</body>
</html>
スポンサーリンク