スライドするパネルを作成するjavascript「jQuery Sliding Panels」

限られたスペースを有効活用するため、また初めは隠しておきたいコンテンツがある。
そんな時はjQuery Sliding Panelsを使用すれば簡単に導入できます。

sponsors

使用方法

jQuery Sliding Panelsからjquery.slidepanel.pack.jsとjquery.panels.css、さらに矢印の画像を、jQueryからjquery.js(v1.2.1)をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/jquery.panels.css" type="text/css">
<script src="http://yourdomain/jquery-1.2.1.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.slidepanel.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.class名').slidePanel();
});
</script>
上のように記述したら対応するclassを要素に指定すれば完成です。
<p class="class名">テキスト</p>
	<div>コンテンツ</div>
またオプションとして最初から開いている状態やアコーディオンスタイル、別ページの読み込みなどができます。
以下のサンプルをご参照下さい。

sponsors

サンプル

Demo 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis semper lacus. Pellentesque sed augue a augue pharetra pharetra. Suspendisse eu mi. Cras molestie eros eu justo. In placerat nunc a quam. Phasellus dictum facilisis dui. Maecenas sed tortor. Phasellus egestas ligula auctor elit. Vivamus metus. Curabitur fringilla. Nam massa ipsum, venenatis quis, euismod a, vulputate id, dolor.

Demo 2

<script type="text/javascript">
$(document).ready(function(){
	$('.class名').slidePanel({status:'open'});
});						
</script>

Accordion

<script type="text/javascript">
$(document).ready(function(){
	$('.class名').slidePanel({role:'accordion'});
});
</script>
各パネル要素にclass名を付与してください。

Accordion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis semper lacus. Pellentesque sed augue a augue pharetra pharetra. Suspendisse eu mi. Cras molestie eros eu justo. In placerat nunc a quam. Phasellus dictum facilisis dui. Maecenas sed tortor. Phasellus egestas ligula auctor elit. Vivamus metus. Curabitur fringilla. Nam massa ipsum, venenatis quis, euismod a, vulputate id, dolor.

Accordion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec facilisis semper lacus. Pellentesque sed augue a augue pharetra pharetra. Suspendisse eu mi. Cras molestie eros eu justo. In placerat nunc a quam. Phasellus dictum facilisis dui. Maecenas sed tortor. Phasellus egestas ligula auctor elit. Vivamus metus. Curabitur fringilla. Nam massa ipsum, venenatis quis, euismod a, vulputate id, dolor.

Demo 3

Javascriptサンプルページ一覧
skuare.net