<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>
またオプションとして最初から開いている状態やアコーディオンスタイル、別ページの読み込みなどができます。Demo 1
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
Accordion