アコーディオンでリスト(li)タグを表示/非表示してみる



jQueryのhide、slideDown、slideUpを使って
アコーディオン風にリスト(li)タグを表示・非表示してみます。

1.CSSの記述例

<style type="text/css">
<!--
a {
	text-decoration:none;
	font-size:12px;
	color:#cccccc;
}
ul#menu, ul.sub_menu{
	list-style:none;
	margin:0;
	padding:0;
}
#menu{
	background-color:#999;
	width:300px;
	margin:10px;
	border:1px solid #cccccc;
	border-bottom:none;
}
.main_menu{
	color:#ffffff;
	font-size:11pt;
	font-weight:bold;
	padding:13px 10px 0;
	margin:-1px 0 0 -1px;
	cursor:pointer;
	width:280px;
	height:35px;
	border:1px solid #cccccc;
}
.sub_menu li{
	background:#666;
	padding:13px 10px 0;
	border:1px solid #cccccc;
	font-size:11pt;
	font-weight:bold;
	width:280px;
	height:35px;
	margin:-1px 0 0 -1px;
}
-->
</style>

2.JavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.sub_menu').hide();
	$('.main_menu').click(function(){
		$('ul.sub_menu').slideUp();
		if($('+ul.sub_menu',this).css('display') == 'none'){
			$('+ul.sub_menu',this).slideDown();
		}
	});
});
</script>

3.HTMLの記述例

<ul id="menu">
<li>
	<div class="main_menu">メニュー1</div>
	<ul class="sub_menu">
	<li><a href="/category/css" title="CSS に含まれる投稿をすべて表示" target="_blank">CSSに関するお知らせ</a></li>
	<li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示" target="_blank">Facebookに関するお知らせ</a></li>
	</ul>
</li>
<li>
	<div class="main_menu">メニュー2</div>
	<ul class="sub_menu">
	<li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示" target="_blank">HTML5に関するお知らせ</a></li>
    <li><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示" target="_blank">JavaScriptに関するお知らせ</a></li>
	<li><a href="/category/php" title="PHP に含まれる投稿をすべて表示" target="_blank">PHPに関するお知らせ</a></li>
	</ul>
</li>
<li>
	<div class="main_menu">メニュー3</div>
	<ul class="sub_menu">
	<li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示" target="_blank">SEOに関するお知らせ</a></li>
	<li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示" target="_blank">WordPressに関するお知らせ</a></li>
	<li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示" target="_blank">その他に関するお知らせ</a></li>
	<li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示" target="_blank">スマートフォンに関するお知らせ</a></li>
	</ul>
</li>
</ul>

アコーディオンでリスト(li)タグを表示/非表示するデモ

jQueryのアコーディオン系ってtoggleを使っても出来るんでしたっけ?