THE HAM MEDIA BLOG

ボックスの内容をスライドさせて切り替えるjQueryを使ったスクリプト

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
スライド
javascript
jquery

ボックスの内容をスライドさせて切り替えるjQueryを使ったスクリプト

jQueryでアコーディオン表現とかあるけど、
ボタンでボックスの中身をスライドさせて
切り替えられないかなと思ったので、
ためしに作ってみた。



jQueryを使う練習に作ってみた

jQuery使っていろいろしたりしているけど、
まだまだぜんぜん知らなかったりする。
でも、練習として何かを作ってみようと思ったので、
試しにボタンで切り替えるボックスを作ってみた。

今回作ってみたもの

う〜ん、もっと上手プログラムできたんだろうけど、
今の僕の知識だとコレくらいかな。
ボタン一つ一つで、一つのまとまりを作ったけど、
たぶん3つまとめて一つにしたものとかもできるんだろうな。

ボックス1

ボックス2

ボックス3

●JavaScript

$(document).ready(function(){
	$("p.togglebox1,p.togglebox2,p.togglebox3").hide(); 
	$("input.togglebox1").click(function(){
		$("p.togglebox2,p.togglebox3").slideUp("slow");
		$("p.togglebox1").slideToggle("slow"); 
	});
	$("input.togglebox2").click(function(){
		$("p.togglebox1,p.togglebox3").slideUp("slow");
		$("p.togglebox2").slideToggle("slow"); 
	});
	$("input.togglebox3").click(function(){
		$("p.togglebox1,p.togglebox2").slideUp("slow");
		$("p.togglebox3").slideToggle("slow"); 
	});
});

●HTML

<form>
    <input type="button" value="ボタン1" class="togglebox1" />
    <input type="button" value="ボタン2" class="togglebox2" />
    <input type="button" value="ボタン3" class="togglebox3" />
</form>
<div class="slidebox">
    <p class="togglebox1">ボックス1</p>
    <p class="togglebox2">ボックス2</p>
    <p class="togglebox3">ボックス3</p>
</div>

●CSS

input {
    padding: 5px;
    border: 1px solid #000;
}
div.slidebox {
    display: block;
    width: 300px;
    height: 100px;
    margin: 10px 0 30px;
    overflow: hidden;
}
p {
    display: block;
    width: 302px;
    height: 102px;
    margin: 0;
    border: 1px solid #ccc;
    background-color: #eee;
}
参考サイト:


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。