jQueryでスライドパネル表示

ボタンをクリックしてからスライドパネルが表示される仕組みになります。

いつも通りjQueryの読み込み。

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>

まずはCSS側のソースはこちら。

<style type="text/css">
.button{
// ここはお好みのデザインを記述
}
#open{
// ここはお好みのデザインを記述
display:none;
}
</style>

そしてjQuery側のソースはこちら。

<script language="javascript">
$(function(){
$(".button").click(function(){
$("#open").slideToggle("slow");
});
});
</script>

HTML側のソースはこちら。

<p class="button">クリック</p>
<div id="open">
商品の説明補足などなど。スライド箇所にて表示される空間になります。
</div>

これを使えば多少動きのあるページが作成できそうですね。