jQueryを使って別ページのアコーディオン(もどき)を開く

新着情報をホームに出し、クリックしたらお知らせ一覧ページの該当箇所へスクロール+内容がアコーディオンのように開く…という要望をいただいたので書いてみました。

操作する側のHTML

<a href="/test/?entry=entry9">entry9を開く</a>｜
<a href="/test/?entry=entry10">entry10を開く</a>｜
<a href="/test/?entry=entry11">entry11を開く</a>

共通jQuery

$(function() {
	var enrtyurl = $(location).attr('href');
	setTimeout(function() {
		if(enrtyurl.indexOf("/?entry=") != -1) {
			var enrtyid = enrtyurl.split("?entry=");
			if(enrtyid) {
				$('#' + enrtyid[1]).slideDown(500);
			}
		}
		if(enrtyid) {
			var $target = $('#' + enrtyid[1]);
			if($target.length) {
				var pos = $target.offset().top;
				$("html, body").animate({scrollTop:pos}, 850);
			}
		}
	},100);
});

操作される側のHTML

<ul>
	<li>
		<a href="?entry=entry9">entry9</a>
		<div class="content" id="entry9">entry9の内容</div>
	</li>
	<li>
		<a href="?entry=entry10">entry10</a>
		<div class="content" id="entry10">entry10の内容</div>
	</li>
	<li>
		<a href="?entry=entry11">entry11</a>
		<div class="content" id="entry11">entry11</div>
	</li>
</ul>

操作される側のCSS

.content {
	display: none;
}

操作される側のjQuery(共通jQueryに足して)

$(function() {
	$('a[href*="?entry="]').click(function() {
		var enrtyurl = $(this).attr("href");
		var enrtyid = enrtyurl.split("?entry=");

		$('.content').slideUp(500);
		if($('#' + enrtyid[1]).css('display') == 'block') {
			$('#' + enrtyid[1]).slideUp(500);
		} else {
			$('#' + enrtyid[1]).slideDown(500);
		}
		return false;
	});
});

DEMO

前の記事

カスタム投稿タイプにもリビジョンを実装

次の記事

jQueryを使って背景画像入れ替えとカルーセル(プラグインなし)