jQuery multi level accordion menu

jQuery multi level accordion menu

by Zelphir

HTML

<body>
	<div>
		<ul class='multi-level-accordion-menu'>
			<li>Item 1
				<ul>
					<li>Item 1.1
						<ul>
							<li>Item 1.1.1</li>
							<li>Item 1.1.2</li>
							<li>Item 1.1.3</li>
							<li>Item 1.1.4</li>
						</ul>
					</li>
					<li>Item 1.2</li>
					<li>Item 1.3</li>
					<li>Item 1.4</li>
					<li>Item 1.5</li>
					<li>Item 1.6</li>
				</ul>
			</li>
			<li>Item 2</li>
			<li>Item 3
				<ul>
					<li>Item 3.1
						<ul>
							<li>Item 3.1.1</li>
							<li>Item 3.1.2</li>
							<li>Item 3.1.3</li>
							<li>Item 3.1.4</li>
						</ul>
					</li>
					<li>Item 3.2</li>
					<li>Item 3.3</li>
					<li>Item 3.4</li>
					<li>Item 3.5</li>
					<li>Item 3.6</li>
				</ul>
			</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
			<li>Item 7</li>
		</ul>
	</div>
</body>

CSS

.multi-level-accordion-menu * {
	margin: 0px;
	padding: 0px;
}

.multi-level-accordion-menu {
	list-style: none;
	max-width: 200px;
}
.multi-level-accordion-menu ul {
	list-style: none;
}

.multi-level-accordion-menu li {
	border-color: #EEEEEE;
	border-width: 1px;
	border-style: solid;
	
	background-color: #303030;
		
	margin: 2px;
	padding: 2px;
	
	line-height: 30px;
	
	font-size: 16px;
}

.multi-level-accordion-menu {
	color: #DDDDDD;	
}

body {
	background-color: #202020;
}

JavaScript

$(document ).ready(function() {
	
	// at the beginning only the top menu items are visible
	$('.multi-level-accordion-menu > li ul').slideUp(0);
	console.log('all elements slid up');
	
	
	// when a menu item which is not active is clicked, show the next lower level
	// when a menu item which is active is clicked, hide all its sub menu items
	$('.multi-level-accordion-menu li').click(function(){
		var menu_item = $(this);
		
		if(is_active(menu_item)) {
			console.log('active menu item clicked');
			close_menu_item(menu_item);
			
		} else {
			console.log('inactive menu item clicked');
			open_menu_item(menu_item);
			
		}
	});
		
	console.log('READY!');
});

function open_menu_item(menu_item) {
	menu_item.children('ul').slideDown(500);
	menu_item.addClass('active-menu-item');
}

function close_menu_item(menu_item) {
	console.log('1x');
	
	menu_item.find('ul').each(function(index, elem) {
		$(elem).slideUp();
		return false;
	});
	
	menu_item.removeClass('active-menu-item');
}

function is_active(menu_item) {
	return menu_item.hasClass('active-menu-item');
}