Эмм, чёт не вышло
https://jsfiddle.net/3xe1fp9r/9/
Добавил я свойство show и redCircle.classList.toggle('show', false) но событие по лику не отображается //Cannot read property 'toggle' of undefined
И ещё я не очень понял как этот toggle работает со стилями который определены не в теге <style> а в отдельном css файле, там же как то путь надо прописать?

Black_Star,
потому что вы как и прежде не понимаите разницу между списком redCircle и элементом redCircle[i] и чем будет i после for

При работе с классами, [i] будет номером элемента в данном классе с которым мы планируем работать.

Black_Star,
чем не устроил пост 10?

redCircle[i].classList.toggle('show', false) // так работать не будет, хотя с виду всё правильно

:) Это я уяснил сразу же, хотя оно меня и смутило. Вроде как привязка идет к одному и тому же номеру массива. (Первый элемент первого массива = первому элементу первого подмассива и тд.)

Black_Star,
когда происходит вызов функции i будет равно во всех функциях одному и тому же.
чтоб этого не происходило смотрите пост 5

[].forEach.call(document.querySelectorAll('.Buttons'), function(item, i) {
        item.addEventListener('click', function() {
           alert(i);
        });
    });

по ссылкам прочтите внимательно
http://javascript.ru/basic/closure#p...-ispolzovaniya

https://learn.javascript.ru/traversi...массивы