My code script loads all content from my database, using the array function. I’ve created a wrapper DIV, which contains a maximum of 5 inner-divs, based on the number of results. If the script loads 4 results out of the database, 4 inner-divs are created. If the script loads 17 results out of the database, 17 inner-divs are created, etc.
Every page contains 5 inner-divs. It automatically creates a new wrapper-div whenever the previous wrapper-div is completely filled (so I have 4 wrapper-divs if the result = 17 i.e.).
Now, every wrapper contains multiple functions, like close buttons, print buttons, etc. I’ve created this code which works fine for as long as there’s only 1 wrapper-div. But as soon as there are more than one wrapper-divs, nothing works.
I know that the problem is because ID’s have to be unique. But how can I adjust this code so that javascript starts to work? So that if I click, for example, the close button of wrapper 2, only wrapper 2 will close, and not all the wrappers?
[code]var wrapper_programmaker = document.getElementsByClassName(‘wrapper_programmaker’);
for (var g = 1; g < wrapper_programmaker.length; g++) {
var expanded[g] = true;
document.getElementById(“kolom_trigger”+[g]).onclick = function() {
if (!expanded[g])
{
expanded[g] = true;
$("#kolomInstellen"+[g]).hide(1000);
}
else
{
expanded[g] = false;
$("#kolomInstellen"+[g]).show(1000);
};
};
document.getElementById("kolom1_trigger"+[g]).onclick = function() {
document.getElementById('kolom1'+[g]).style.width = 'auto';
$("#kolom2"+[g]).hide();
};
document.getElementById("kolom2_trigger"+[g]).onclick = function() {
document.getElementById('kolom1'+[g]).style.width = '41%';
$("#kolom2"+[g]).show();
};
document.getElementById("closeBTN"+[g]).onclick = function() {
if (!expanded[g])
{
expanded[g] = true;
$("#kolomInstellen"+[g]).hide(1000);
}
else
{
expanded[g] = false;
$("#kolomInstellen"+[g]).show(1000);
};
};
}[/code]