ブログ

最近、URLクエリパラメータで制御できる開閉ボックスを作成しましたので、自身のコピペ用サンプルとして公開します。
こちらの機能、分かりやすくいいますと、クエリパラメータ「?open=box1」でアクセスがあった場合は、「box1」が開いた状態で表示されるというもの。

あまり難しく考えても仕方がないので、簡単な方法で実装してみました。
また、おまけでボックスが開いた状態の時には、開閉用ボタンに「open」のクラス名が追加されるようにしました。

＞サンプル【URLクエリパラメータなし】
＞サンプル【URLクエリパラメータは「?open=box1」】
＞サンプル【URLクエリパラメータは「?open=box2」】

以下が、ソースコードになります。

jQuery

<script type="text/javascript">
$(document).ready(function(){

	$(".box").hide();

	$(".btn").click(function(){
		$(this).next(".box").slideToggle();
		$(this).toggleClass("open");
	});
});


var para = location.search;

if(para == "?open=box1"){
$(window).load(function () {
		$(".box1").slideToggle();
		$(".btn1").toggleClass("open");
});
};

if(para == "?open=box2"){
$(window).load(function () {
		$(".box2").slideToggle();
		$(".btn2").toggleClass("open");
});
};
</script>

CSS

body{
	width:400px;
	margin:0 auto;
	padding:0;
	text-align:center;
}
.btn{
	margin:20px 10px 0;
	padding:10px;
	cursor:pointer;
	background: #EEE;
	color: #444;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
}
.list{
	margin:10px;
	text-align:left;
}
.list ul,
.list li{
	margin:0;
	padding:0;
	list-style-type:none;
}
.list li a{
	display:block;
	padding:5px 0;
	color: #444;
	border-bottom: 1px solid #ccc;
	text-decoration:none;
}

HTML

<div class="btn btn1">box1の開閉用ボタン</div>

<div class="box box1">
    <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
    </ul>
</div>


<div class="btn btn2">box2の開閉用ボタン</div>

<div class="box box2">
    <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
    </ul>
</div>

地味に使いそうじゃないですか？