Trying to make the onclick event work using javascript matchmedia for smaller screen devices. The mainappear() function outside alone without any matchmedia set works just fine. But I want that clicking on a div, making another div visible/hidden when the screen is smaller than 1000px. When I place the mainappear() function inside if condition, it does not work in resizing the window. The reviews-hover is the div where click will happen and reviews-main is the div that will be visible/hidden on click. How can I make the code work to solve this problem for small touch screens where onmouseover doesn't work ...? Don't want to use complex code. Can I make like my code work using javascript (it works without the matchmedia condition) ...?

function navclick(oiio) {
  if (oiio.matches) {
    function mainappear() {
      var revee = document.getElementById("reviews-main");
      
      if (revee.style.visibility === "visible") {
        revee.style.visibility = "hidden";
      } else {
        revee.style.visibility = "visible";
      }
    }

  } else {
    return;
  }
}

var oiio = window.matchMedia("(max-width: 1000px)")
navclick(oiio)
oiio.addListener(navclick)

<div id="reviews-hover" onclick="mainappear()">
</div>
<div id="reviews-main">
</div>