So I came up with the code below. Probably a quicker way possible, but it works
There is however a problem. When I press the corresponding [0] button it’s ok, the corresponding figures (i === 2 and further) are no longer active. But when I press the [1] button, the i === 11 figure is still active. It needs to be set to inactive and the figures under button [1] become active. How do I solve this problem?
var tl = element.id;
var buttons = ['Cmaj', 'Cdor', 'Cfry', 'Clyd', 'Cmix', 'Cmin', 'Clok','reset','Chma', 'Chmi', 'Cpmi', 'Cpma', 'Cmibl', 'Cmabl', 'Chung'];
var x = document.getElementsByClassName('audio1');
switch (tl) {
//maj
case buttons[0]:
document.getElementById('groepC').style.display = "block";
//cirkels
document.getElementById('C1').style.display = "block";
document.getElementById('C2').style.display = "block";
document.getElementById('C3').style.display = "block";
document.getElementById('C4').style.display = "block";
document.getElementById('C5').style.display = "block";
document.getElementById('C6').style.display = "block";
document.getElementById('C7').style.display = "block";
document.getElementById('C-3').style.display = "none";
document.getElementById('C-2').style.display = "none";
document.getElementById('C+4').style.display = "none";
document.getElementById('C-7').style.display = "none";
document.getElementById('C-6').style.display = "none";
document.getElementById('C-5').style.display = "none";
var i;
for (i = 0; i < x.length; i++) {
if (i === 2) { continue; }
if (i === 4) { continue; }
if (i === 6) { continue; }
if (i === 9) { continue; }
if (i === 11) { continue; }
x[i].style.display = "block";
}
break;
//dorisch
case buttons[1]:
document.getElementById('groepC').style.display = "block";
document.getElementById('C1').style.display = "block";
document.getElementById('C2').style.display = "block";
document.getElementById('C3').style.display = "none";
document.getElementById('C4').style.display = "block";
document.getElementById('C5').style.display = "block";
document.getElementById('C6').style.display = "block";
document.getElementById('C7').style.display = "block";
document.getElementById('C-3').style.display = "block";
document.getElementById('C-2').style.display = "none";
document.getElementById('C+4').style.display = "none";
document.getElementById('C-7').style.display = "none";
document.getElementById('C-6').style.display = "none";
document.getElementById('C-5').style.display = "none";
var i;
for (i = 0; i < x.length; i++) {
if (i === 0) { continue; }
if (i === 2) { continue; }
if (i === 4) { continue; }
if (i === 6) { continue; }
if (i === 9) { continue; }
if (i === 12) { continue; }
x[i].style.display = "block";
}
break;