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?