How to set addListener?

Is a function of switching tabs for media query, how to rewrite it or what function can be added to addListener?

Problem:
When the width is less than 801px you should see the contents of only one tab. At most - all three.
Now, if you 1) remove addListener:
and if the width is less than 801 and click on the taboo, and then expand the window, it remains visible only one tab. (In CSS it is written that the standard must be evident to all, do not understand why browser is not tracked automatically).
2) if you use a

mq.addListener(switchVariant);
 switchVariant(mq);

then when we narrow window (less than 801) lost all the content of tabs. It is understandable, in the code it written, but I don't know how to write otherwise.
3) Tried to add additional function for track width, and switchWariant() only for clicks to track, but they begin to clash. Taba cease to work.

(function () {
 var selector = '.varmenu';
 var elems = document.querySelectorAll(selector);
 var mq = window.matchMedia("(max-width: 801px)");
mq.addListener(switchVariant);
switchVariant(mq);

 function widthChange () {
}

 switchVariant function() {
 if (mq.matches) {
event.preventDefault();
 var x = document.getElementsByClassName("variant__target");
 var i;
 for (i = 0; i < x.length; i++) {
 x[i].style.display = 'none';
}

 for (var i = 0; i < elems.length; i++)
elems[i].classList.remove('varmenu_active');
this.classList.add("varmenu_active");
 var variantActive = this.getAttribute('href').substr(1);
 document.getElementById(variantActive).style.display = 'block';
}
 else {
 var x = document.getElementsByClassName("variant__target");
 var i;
 for (i = 0; i < x.length; i++) {
 x[i].style.display = 'block';
}
}
}

 for (var i = 0; i < elems.length; i++)
 elems[i].addEventListener('click', switchVariant);

})();