Question

I am trying to create collapsible DIVs that react to links being clicked. I found how to do this using “next” but I wanted to put the links in a separate area. I came up with this which works…
JSFiddle – Works

function navLink(classs) {
this.classs = classs; 
} 

var homeLink = new navLink(".content-home");
var aboutLink = new navLink(".content-about");
var contactLink = new navLink(".content-contact"); 
var lastOpen = null;


$('.home').click(function() {
 if(lastOpen !== null) {
     if(lastOpen === homeLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
 }
   $('.content-home').slideToggle('slow'); 
        lastOpen = homeLink; 
} 
); 


$('.about').click(function() {
if(lastOpen !== null) {
     if(lastOpen === aboutLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-about').slideToggle('slow'); 
        lastOpen = aboutLink; 
} 
);  

$('.contact').click(function() {
if(lastOpen !== null) {
     if(lastOpen === contactLink) {
         return; } else {
    $(lastOpen.classs).slideToggle('fast');
}
}
   $('.content-contact').slideToggle('slow'); 
        lastOpen = contactLink; 
}
);​

I am now trying to create the same result but with a single function instead of one for each link. This is what I came up with….

function navLink(contentClass, linkClass, linkId) {
this.contentClass = contentClass;
this.linkClass = linkClass;
this.linkId = linkId;
}

var navs = [];

navs[0] = new navLink(".content-home", "nav", "home");
navs[1] = new navLink(".content-about", "nav", "about");
navs[2] = new navLink(".content-contact", "nav", "contact");

var lastOpen = null;

$('.nav').click(function(event) {

//loop through link objects
var i;
for (i = 0; i < (navsLength + 1); i++) {

    //find link object that matches link clicked
    if (event.target.id === navs[i].linkId) {

        //if there is a window opened, close it 
        if (lastOpen !== null) {
            //unless it is the link that was clicked
            if (lastOpen === navs[i]) {
                return;
            } else {
                //close it
                $(lastOpen.contentClass).slideToggle('fast');
            }
        }

        //open the content that correlates to the link clicked
        $(navs[i].contentClass).slideToggle('slow');

        navs[i] = lastOpen;


    }
 }
 });​

JSFiddle – Doesn’t Work

No errors so I assume that I am just doing this completely wrong. I’ve been working with Javascript for only about a week now. I’ve taken what I’ve learned about arrays and JQuery events and tried to apply them here. I assume I’m way off. Thoughts? Thanks

Answer 1

You just forgot to define navsLength:

var navsLength=navs.length;

Of course you could also replace it with a $().each loop as you’re using jQuery.

[Update] Two other errors I corrected:

lastOpen=navs[i];

for(i=0; i < navsLength ; i++)

Demo: http://jsfiddle.net/jMzPJ/4/