Better way to consolidate this code?

JavaScript
1

I have 8 menus on a page and instead of listing out all 8 I want to loop through 0.length and only write the code below once.


$('.collapse1').click(function() {
		$('.collapse1').css("display","none");
		$('.expand1').css("display","block");
		$('#mainContent').css("height","20px");
		$('#content1').css("display","none");
		$.cookie('mainContent', 'collapsed');
	});
	// When the expand button is clicked:
	$('.expand1').click(function() {
		$('.expand1').css("display","none");
		$('.collapse1').css("display","block");
		$('#mainContent').css("height","auto");
		$('#content1').css("display","block");
		$.cookie('mainContent', 'expanded');
	});
$('.collapse2').click(function() {
		$('.collapse2').css("display","none");
		$('.expand2').css("display","block");
		$('#mainContent').css("height","20px");
		$('#content2').css("display","none");
		$.cookie('mainContent', 'collapsed');
	});
	// When the expand button is clicked:
	$('.expand2').click(function() {
		$('.expand2').css("display","none");
		$('.collapse2').css("display","block");
		$('#mainContent').css("height","auto");
		$('#content2').css("display","block");
		$.cookie('mainContent', 'expanded');
	});

So I’m thinking something like this:


var i=0;
for (i=0;i.length;i++) {
$('.expand[i]').click(function() {
		$('.expand[i]').css("display","none");
		$('.collapse[i]').css("display","block");
		$('#mainContent').css("height","auto");
		$('#content[i]').css("display","block");
		$.cookie('mainContent', 'expanded');
}

but I’m not sure of the syntax. Any ideas?

2

nevermind. I created an easier solution.