東京うぇ部

PHPをメインにしたプログラム情報共有サイト

JavaScript

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>

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

コメントを残す




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事