Как улучшить данный код? (не могу разобраться)

[Enkille]

Подскажите, как исправить данный код, чтобы на разрешении меньше 960px по клику на BTN срабатывал event и показывался BLOCK, а при повторном клике на BTN срабатывал снова event на Display:NONE.

Долго ковырялся в данном коде, но ничего путного не вышло. Работает только display:block, а обратно по клику block не закрывается (display:none). Прошу вашей помощи.

(function(){
  var btn = document.querySelector(".gruppi-toggle");
  var block = document.querySelector(".speciali-gruppi-window");

  if (window.screen.width < 960){
    btn.addEventListener("click", function(){block.style.display = "block";});
    btn.addEventListener("click", function(){block.style.display = "none";});
  }
})();

P.S. код немного уменьшил, т.к. у меня есть второй if, на разрешение больше 960 и click\mouseLeave - там все ок.

[Madzal]

(function(){
  var btn = document.querySelector(".gruppi-toggle");
  var block = document.querySelector(".speciali-gruppi-window");

  if (window.screen.width < 960){
 
  btn.addEventListener("click", function(){
 document.clicked = !document.clicked >>> 0;
  if(document.clicked) {
block.style.display = "block";
}}
else{
  block.style.display = "none";;
  })();

[hhh]

<button class="gruppi-toggle">
Click
</button>
<div class="speciali-gruppi-window" style="display: block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ratione, pariatur obcaecati veritatis eum sit. Expedita quas suscipit esse aspernatur sint veritatis eius, dolores, architecto voluptate tempore illo itaque, eligendi.</div>

<script>
(function(){
  var btn = document.querySelector(".gruppi-toggle");
  var block = document.querySelector(".speciali-gruppi-window");
  
   if (window.screen.width < 960){
    btn.addEventListener("click", function() {
      if (block.style.display == "block") {
        block.style.display = "none";
      }
      else {
        block.style.display = "block";
      }
    });
   }
})();

</script>

[ruslan_mart]

.gruppi-toggle.hidden {
   display: none;
}

(function(){
    var btn = document.querySelector('.gruppi-toggle');
        block = document.querySelector('.speciali-gruppi-window');

    if(window.screen.width < 960) {
        btn.onclick = block.classList.toggle.bind(block, 'hidden');
    }
})();

[Enkille]

Спасибо всем отписавшимся, Ruslan_xDD только сейчас увидел ваш вариант.
Воспользовался вышестоящим. Код получился следующим: как считаете можно улучшить? Чтобы не обращаться к каждому элементу по ключу и плодить код?

(function(){
        var btn = document.querySelectorAll(".gruppi-toggle"), block = document.querySelectorAll(".speciali-gruppi-window");
        if (window.screen.width < 960){
          btn[0].addEventListener("click", function(){
            if (block[0].style.display == "none") {
              block[0].style.display = "block";
            }else {
              block[0].style.display = "none";
            }
          });
          btn[1].addEventListener("click", function(){
            if (block[1].style.display == "none") {
              block[1].style.display = "block";
            }else {
              block[1].style.display = "none";
            }
          });
        }if (window.screen.width > 960){
          btn[0].addEventListener("click", function(){block[0].style.display = "block";});
          block[0].addEventListener("mouseleave", function(){block[0].style.display = "none";});
          btn[1].addEventListener("click", function(){block[1].style.display = "block";});
          block[1].addEventListener("mouseleave", function(){block[1].style.display = "none";});
        }
      })();

[ruslan_mart]

.gruppi-toggle.hidden {
   display: none;
}

(function(){
	function handler(event, method, current, target) {
		current['on' + event] = current.classList[method].bind(target || current, 'hidden');
	};
	
	var btn = document.querySelectorAll('.gruppi-toggle'),
		block = document.querySelectorAll('.speciali-gruppi-window'),
		screenIsMin = window.screen.width < 960,
		i, method = screenIsMin ? 'toggle' : 'remove';
	
	for(i = 0; i < btn.length; i++) {
		handler('click', method, btn[i], block[i]);
		if(!screenIsMin) {
			handler('mouseleave', 'add', block[i]);
		}
	}
})();

[Enkille]

.gruppi-toggle.hidden {
   display: none;
}

Благодарю вас, отличное решение! По своему же (т.е. вашему) коду получился.