今日の人気記事

まだデータがありません。

指定した段落数以下を表示・非表示「Hide Paragraphs」

当ページのリンクには広告が含まれています。

スポンサーリンク

指定した段落数以下をクリックアクションで表示・非表示するjQueryプラグイン「Hide Paragraphs」を紹介します。

jQueryプラグイン「Hide Paragraphs」

このプラグインでは、ページ遷移をせずに非表示にした段落をクリックアクションで、表示することができます。また、非表示にすることもできます。1ページに項目数が多い「FAQ」ページなどに便利なプラグインです。

スポンサーリンク

jQueryコードは簡単!クラス名と表示・非表示する段落数を指定するだけで、OKです。デモで、動きを実感してみてください。

「Hide Paragraphs」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hide Paragraphs - jQueryプラグインまとめのカルマ</title>
<style>
div {
  margin: 20px;
  padding: 20px;
  width: 500px;
  border: solid 1px red;
}
</style>
</head>
<body>
<h1>Hide Paragraphsのデモでーす。</h1>
<div class="collapsable">
<h2>1. 項目</h2>
<p>1つ目のパラグラフです。</p>
<p>2つ目のパラグラフです。</p>
<p>3つ目のパラグラフです。</p>
</div>
<div class="collapsable">
<h2>2. 項目</h2>
<p>1つ目のパラグラフです。</p>
<p>2つ目のパラグラフです。</p>
<p>3つ目のパラグラフです。</p>
</div>
<div class="collapsable">
<h2>3. 項目</h2>
<p>1つ目のパラグラフです。</p>
<p>2つ目のパラグラフです。</p>
<p>3つ目のパラグラフです。</p>
</div>

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="hide_paragraphs.js"></script>
<script>
$(function () {
  $(".collapsable").hideParagraphs({show: 2});
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)