複数階層のアコーディオン

複数階層の折りたたみ


<ul class="accordion">
	<li><span>LIST 1</span>
		<ul>
			<li><span>LIST 1-1</span>
				<ul>
					<li><a href="#">LIST 1-1-1</a></li>
					<li><a href="#">LIST 1-1-2</a></li>
				</ul>
			</li>
			<li><span>LIST 1-2</span>
				<ul>
					<li><a href="#">LIST 1-2-1</a></li>
					<li><a href="#">LIST 1-2-2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><span>LIST 2</span>
		<ul>
			<li><span>LIST 2-1</span>
				<ul>
					<li><a href="#">LIST 2-1-1</a></li>
					<li><a href="#">LIST 2-1-2</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


ul ul {
	margin-left:1em;
	}
.accordion li {
	cursor:pointer;
	}


$(function(){
	$("ul.accordion ul").hide();
	$(".accordion span").click(function(){
		$(this).next("ul").slideToggle();
		});
	})

TOP