Hide/Show Depending on Screen Size javascript

Question

What I want:

When on PC/MAC: All content shall be shown.

When on Smartphone or Tablet: the content should be hidden.

I know I have to look at screen size, but how do I do that?

See my code:

$(document).ready(function() {
	$("#button-opl").on('click',function(){
		$("#views-exposed-form-attraktioner-block").slideToggle();
	});
});

button{
  background-color:grey;
  border:none;
  padding:15px 25px;
  cursor:pointer;
  width:100%;
  color:white;
  font-size:18px;
}

#views-exposed-form-attraktioner-block{
  display:none;
  background-color:orange;
  width:100%;
  color:white;
  text-align:center;
  padding:15px 25px;
	box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-opl">
  Click here!
</button>
<div id="views-exposed-form-attraktioner-block">
Hello World
</div>

Answer 1

Javascript way

If you want to do it with Javascript, you'll have to check your window size and act upon that.

I chose the breakpoint to be 480px wide, here.

I also added a $(window).on('resize') to update your page when the window is resized :

var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

if (vw <= 480) {
  $('div').hide();
}

$(window).on('resize', function() {
  vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  if (vw <= 480) {
    $('div').hide();
  }else{
    $('div').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm not visible on mobile !</div>

CSS way

You can do it really easily without any Javascript using CSS Mediaqueries :

@media screen and (max-width: 480px){
  div{
    display: none;
  }
}

<div>I'm not visible on mobile !</div>