Многоуровневое меню в стиле аккордеон

jQuery плагин для реализации многоуровневого меню аккордеон

HTML

<ul class="topnav">
	<li><a href="#">Главная</a></li>
	<li><a href="#">JavaScript</a>
		<ul>
			 <li><a href="#">Cookies</a></li>
			 <li><a href="#">Events</a></li>
			 <li><a href="#">Forms</a></li>
			 <li><a href="#">Games</a></li>
			 <li><a href="#">Images</a></li>
			 <li><a href="#">Navigations</a>
				<ul>
					<li><a href="#">CSS</a></li>
					<li><a href="#">JavaScript</a></li>
					<li><a href="#">JQuery</a></li>
				</ul>
			</li>
			 <li><a href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a href="#">Tutorials</a>
		<ul>
			 <li><a href="#">HTML</a></li>
			 <li><a href="#">CSS</a></li>
			 <li><a href="#">JavaScript</a></li>
			 <li><a href="#">Java</a>
				<ul>
					<li><a href="#">JSP</a></li>
					<li><a href="#">JSF</a></li>
					<li><a href="#">JPA</a></li>
					<li><a href="#" target="_blank">Contact</a></li>
				</ul>
			</li>
			 <li><a href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a href="#" target="_blank">Contact</a></li>
	<li><a href="#">Upload script</a></li>
</ul>

CSS

.topnav {
	width: 213px;
	padding: 40px 28px 25px 0;
	font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}

ul.topnav {
	padding: 0;
	margin: 0;
	font-size: 1em;
	line-height: 0.5em;
	list-style: none;
}

ul.topnav li {}

ul.topnav li a {
	line-height: 10px;
	font-size: 11px;
	padding: 10px 5px;
	color: #000;
	display: block;
	text-decoration: none;
	font-weight: bolder;
}

ul.topnav li a:hover {
	background-color:#675C7C;
	color:white;
}

ul.topnav ul {
	margin: 0;
	padding: 0;
	display: none;
}

ul.topnav ul li {
	margin: 0;
	padding: 0;
	clear: both;
}

ul.topnav ul li a {
	padding-left: 20px;
	font-size: 10px;
	font-weight: normal;
	outline:0;
}

ul.topnav ul li a:hover {
	background-color:#D3C99C;
	color:#675C7C;
}

ul.topnav ul ul li a {
	color:silver;
	padding-left: 40px;
}

ul.topnav ul ul li a:hover {
	background-color:#D3CEB8;
	color:#675C7C;
}

ul.topnav span{
	float:right;
}

JavaScript

(function($){
    $.fn.extend({

    //pass the options variable to the function
    accordion: function(options) {
        
		var defaults = {
			accordion: 'true',
			speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'
		};

		// Extend our default options with those provided.
		var opts = $.extend(defaults, options);
		//Assign current element to variable, in this case is UL element
 		var $this = $(this);
 		
 		//add a mark [+] to a multilevel menu
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//add the multilevel sign next to the link
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 				
 				//avoid jumping to the top of the page when the href is an #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});

 		//open active level
 		$this.find("li.active").each(function() {
 			$(this).parents("ul").slideDown(opts.speed);
 			$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
 		});

  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Do nothing when the list is open
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.closedSign);
  									});
  									
  								}
  							}
  						});
  					}
  				}
 ...