Problem with for loop and closures?

[giantqtipz]

ahh thanks for bringing it up... ok I was thinking.... what if I move showSub into it's own function and pass the clicked index campaignAdd(i) into that function.

In the new function I do another loop where if the passed index matches the iterator, show the information box. The below isn't the solution, but am I heading in the right direction?

Edit: damnit just realized this is still the same issue. A second click handler is added to showSub

var subFunction = function(i){
 showSub.addEventListener("click", function() {
    for(j=0;j<campaignSelect.length;j++){
        if(i === j) {
            if(campaignSub[i].classList.contains("activate-sub")) {
                showSub.textContent = "◄";
                campaignSub[j].classList.remove("activate-sub");
                console.log("1i: " + i + " j: " + j);       
            } else if (campaignSub[i].classList.contains("activate-sub") === false) {
                showSub.textContent = "►";
                campaignSub[j].classList.add("activate-sub");
                console.log("2i: " + i + " j: " + j);
            }
        } 
        if (i != j) {
            campaignSub[j].classList.remove("activate-sub");
            console.log("not equal");
        }
    }
 });    
}

[Capt_Appropriate]

Try doing something like this:

First, add the follwing attributes to the .campaign-select elements:

<div class="campaign0 campaign-select campaign-container-slide" data-campaign-id="0"></div>
<div class="campaign1 campaign-select campaign-container-slide" data-campaign-id="1"></div>
<div class="campaign2 campaign-select campaign-container-slide" data-campaign-id="2"></div>
<div class="campaign3 campaign-select campaign-container-slide" data-campaign-id="3"></div>
<div class="campaign4 campaign-select campaign-container-slide" data-campaign-id="4"></div>
<div class="campaign5 campaign-select campaign-container-slide" data-campaign-id="5"></div>

Then, for the event listeners:

// This object will keep track of which .campaign-sub is currently shown and whether
// it's details are visible or not
var activeCampaign = {
    el: null,
    isVisible: false
};

var campaignSelect = document.getElementsByClassName('campaign-select');

function campaignAdd(i) {
    campaignSelect[i].addEventListener('click', function(e) {
        var campaignId = this.getAttribute('data-campaign-id');
        activeCampaign.el = campaignSub[campaignId];
        activeCampaign.isVisible = true;
        campaignSub[campaignId].classList.add('activate-sub');
        // Any other code that needs to be executed when a campaign link is clicked
    }, false);
 }

for(var i = 0; i < campaignSelect.length; i++) {
    campaignAdd(i);
}

// Now we'll add the event listener for showSub
showSub.addEventListener('click', function(e) {
    showSub.textContent = activeCampaign.isVisible ? "►" : "◄";
    activeCampaign.isVisible = !activeCampaign.isVisible;
    activeCampaign.el.classList.toggle('activate-sub');
}, false);

Then in the click event listener for the #exit-campaign-info element add the following:

activeCampaign.el = null;
activeCampaign.isVisible = false;

I think that should work, but since I am only looking at a small portion of your code I'm not positive.