ブログ

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

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

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

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

jQuery

[javascript]
<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>
[/javascript]

CSS

[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;
}
[/css]

HTML

[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>
[/html]

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