For loop to create dynamic functions

[jbonnett]

Hi all,

I'm trying to create different sidebar divs from use of a different toggle buttons, when a particular button is pressed the particular sidebar appears.

The problem I'm having is creating this dynamically so I don't have to add extra code for each new menu I create. 

 

The HTML

<div id="editor-option_sidebar">
	<ul>
		<li><a class="editor-button" id="editor-folder" href="#"><i class="icon-grey icon-folder i"></i></a></li>	
    	<li><a class="editor-button" id="editor-code" href="#"><i class="icon-grey icon-code i"></i></a></li>
    </ul>
</div>

<div class="editor-menu" id="editor-folder">
  Folder
</div>

<div class="editor-menu" id="editor-code">
  Code
</div>

The CSS

@media screen { 

	body {
		overflow: hidden;
	}
		
	#editor { 
		margin: 0;
		position: absolute;
		left: 60px;
		top: 0;
		bottom: 0;
		right: 0;
	}
	
	#editor-option_sidebar {
		height: 100%;
		width: 60px;
		position: absolute;
		top: 0px;
		left: 0px;
		background: #0c0c0c;
		padding: 18px;
	}
	
	#editor-option_sidebar ul li {
		margin-bottom:10px;
		margin-top:10px;
	}
	
	#editor-option_sidebar ul li a {
		text-decoration:none;
		outline: none;
	}
	
	#editor-option_sidebar ul li a .i {
		font-size: 25px;
		color:#777;
	}
	
	#editor-option_sidebar ul li a:hover .i {
		color:#FFF;
	}
	
	.editor-menu {
		position:absolute;
		top: 0px;
		left: 60px;
		width: 300px;
		height: 100%;
		background: #ecf0f1;
		display:none;
	}

}

The JavaScript (jQuery)

$(document).ready(function() {
	
	var buttons = [];
	var menus = [];
	var menuComplete = [];
	
	$('.editor-button').each(function() {
		buttons.push( this.id );
	});
	
	$('.editor-menu').each(function() {
		menus.push( this.id );
	});
	
	for ( var i = 0; i < buttons.length; i++ ) {
		if ($.inArray(buttons[i], menus) != -1) {
    		menus.push( buttons[i] );
		}
	}
	
	for ( var i = 0; i < menuComplete.length; i++ ) {
		var menuComplete[i]+'int' = 0;
		$(".editor-button #"+menuComplete[i]).click(function() {
			if ( menuComplete[i]+'int' == 0 ) {
				$(".editor-menu #"+menuComplete[i]).css("display", "block");
				$("#editor").css("left", "360px");
			} else if ( menuComplete[i]+'int' == 1 ) {
				$(".editor-menu #"+menuComplete[i]).css("display", "none");
				$("#editor").css("left", "60px");
				menuComplete[i]+'int' = -1;
			}
			menuComplete[i]+'int' = (menuComplete[i]+'int') + 1;
		});
	}
	
});

[Irate]

Use either PHP if you can or pass dynamically computed values to the Function() constructor.