Почему.matchMedia не работает в этих определенных условиях?

Question

Я делаю страницу, которая использует кнопки для отображения контента, когда экран шире, чем 500 пикселей, а затем он переходит к макету в стиле "аккордеон", когда экран меньше, чем 500 пикселей. Я использую прослушиватели событий и сопоставляю медиа с оператором if/else, чтобы определить, какой код запустить.

Однако, когда код запускается с окном размером менее 500 пикселей, а затем перетаскивается, чтобы сделать его больше, чем 500 пикселей, кнопки не реагируют на "щелчок" при нажатии, и ничего не происходит.

Может кто-нибудь, пожалуйста, посоветуйте, где я иду не так?

Пожалуйста, смотрите JSfiddle здесь

//Start listing variables for use in array.
var art1 = document.getElementById("article1");
var button1 = document.getElementById("list1");

var art2 = document.getElementById("article2");
var button2 = document.getElementById("list2");

var art3 = document.getElementById("article3");
var button3 = document.getElementById("list3");

var articleArray = [art1, art2, art3];
var buttonArray = [button1, button2, button3];



function mediaQuery(x) {
//If window is under 500px in width.
  if (x.matches) {
//Begin accordion code
   var initAccordion = function(accordionElement) {

    function handlePanelClick(event) {
    showPanel(event.currentTarget);
  }

  function showPanel(panel) {
  var expandedPanel = accordionElement.querySelector(".active");
  if (expandedPanel) {
        expandedPanel.classList.remove("active");
  }
  panel.classList.add("active");
  }

  var allPanelElements = accordionElement.querySelectorAll(".panel");
  for (var y = 0; len = allPanelElements.length; y++ ) {
        allPanelElements[y].addEventListener("click", handlePanelClick);
  }

 showPanel(allPanelElements[0]);

}
initAccordion(document.getElementById("contentWrapper"));

  } 
  else //If window if is over 500px in width.
  {
    //Begin button code.
    var createfunc = function (i) {
    return function() { document.getElementById("fillMe").innerHTML = articleArray[i].innerHTML;};
}


for (let i=0; i < articleArray.length; i++) {
let button = buttonArray[i];
button.addEventListener("click", createfunc(i));
}
  }
}


//Declare media query and add listener.
var x = window.matchMedia("(max-width: 500px)")
mediaQuery(x) // Call listener function at run time
x.addListener(mediaQuery) // Attach listener function on state changes