jQueryを使って、展開を行いたいときのjQueryサンプルコードスニペット。このサンプルでは、クラスを付与したり閉じるときには除去したりして展開を実現する。

jQueryコード

/* --------------------------------------------------------------------------------
ヘッダー展開メニュー
-------------------------------------------------------------------------------- */
$(window).on('load', function(){
	
	// 展開click
	$('#header .h-nav .open-close .open-close-btn').click(function(){
		
		if ( $(this).parent().hasClass('active') == true ) {
			// すべて閉じる
			$('#header .h-nav .open-close').stop().removeClass('active');
		} else {
			// すべて閉じる
			$('#header .h-nav .open-close').stop().removeClass('active');
			
			// 自分自身を展開
			$(this).parent().stop().addClass('active');
		}
		
	});
	
});

jQueryの使い方

※まずはコアファイルjQueryのファイルを読み込まなければ実現できません。

jQueryのコアファイルを読み込んだあとに<script>タグで処理を記述します。
必ず、HTMLが読み込まれてから処理が始まらないと、存在しないHTMLに対して操作を行うということになるので、loadか$(document).ready市内といけません。詳しくは、それらの文献を探してみてください。

<script src="jquery.js"></script><!-- ダウンロード or ホスティングサーバーから読み込み -->
<script>
$(function(){
// ~jQueryコード(略)~
});
</script>