ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQuery ボックスの開閉機能(URLクエリパラメータによる制御付き)

最近、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>

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

投稿日
2014年9月25日
カテゴリー
JavaScript

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント
事業別サイト