Javascript: Checking if element is hidden: Media Queries

I am trying to make a simple toggle button, typically I use the code below, of course it won’t work if you’re using media queries to hide the element at a certain breakpoint.

Basically, I want to display:none an element at < 767px, but still open it with the button.

@media only screen and (max-width:767px){
#dir-map {display:none}

<button onclick="myToggle()">Toggle</button>
<div id="dir-map">
THE Google MAP

<script>function myToggle() {
  var x = document.getElementById("dir-map");
  if ( === "none") { = "block";
  } else { = "none";

Obviously that won’t work (well unless they click it twice), since #dir-map doesn’t actually have the style inline, it only has it hidden via a media query.

So, basically I need to find a way to check if the element is hidden or not (not just relying on it having the inline style).

You can check on === "" || === "none"

or you can just work with “” by settings = "";

in your function

Hi @jeremy58, you can get the actual style with getComputetStyle() like so:

var display = window.getComputedStyle(x).getPropertyValue('display')

if (display === 'none') {
  // ...

But then again, why not simply have the button toggle a visible class (say) so you can do the rest with CSS media queries as well (and hide the button altogether for larger MQs)?