THE HAM MEDIA BLOG

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

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

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

今回作ってみたもの

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

●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="ボタン１" class="togglebox1" />
    <input type="button" value="ボタン２" class="togglebox2" />
    <input type="button" value="ボタン３" class="togglebox3" />
</form>
<div class="slidebox">
    <p class="togglebox1">ボックス１</p>
    <p class="togglebox2">ボックス２</p>
    <p class="togglebox3">ボックス３</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;
}