How to only use jquery .css() on a specific media query?

Question

When a user's browser has a width of less than 1160px, a media query is setup to collapse my site's right sidebar. They can get it back by clicking on a little arrow and then it will overlap the content (absolute positioning).

Anyway, I used the following jQuery to achieve this:

$('.right_sidebar_preview').on('click', function() {
     $('.right_sidebar_preview').css('display', 'none');
     $('.right_sidebar').css('display', 'block');
});
$('.right_sidebar').on('click', function() {
     $('.right_sidebar_preview').css('display', 'block');
     $('.right_sidebar').css('display', 'none');
});

So basically I already have the preview hidden when the browser is larger than 1160px and the sidebar is visible, in the media query I have it set up so when it's below 1160px, the sidebar becomes invisible and the "sidebar preview" is shown which users can click to make it bigger.

CSS:

.right_sidebar {
  width: 242px;
  height: 100%;
  background-color: #d8e1ef;
  float: right;
  position: relative;
}
.right_sidebar_preview {
  display: none;
}
@media(max-width:1160px) {
  .right_sidebar {
    position: absolute;
    right: 0;
    display: none;
  }
  .right_sidebar_preview {
    display: block;
    background-color: #d8e1ef;
    position: absolute;
    right: 0;
    width: 15px;
    height: 100%;
  }
}

My question is, when I use the code above, let's say we're in the less than 1160px media query, I'll open the sidebar then collapse it again, and when I stretch my browser out to go back, it also closed the sidebar on the greater than 1160px media query.

So is there anyway I can use .css() (or an alternative method) to point at a specific media query?

Answer 1

Do not manipulate the CSS display: property. Instead, use CSS classes to control the visibility of sidebar and its handle. This way you can use your media query to control whether an element displays or not.

In the following demo, click the "Full page" button to see how this works on screens > 1160px.

$(function() {
  $('.right_sidebar, .right_preview').on('click', function() {
    $('.right_sidebar, .right_preview').toggleClass('lt-1160-hide lt-1160-show');
  });
});

.right_sidebar {
  width: 100px;
  height: 100px;
  background-color: papayawhip;
  float: left;
  display: block;
}
.right_preview {
  width: 20px;
  height: 100px;
  background-color: palegoldenrod;
  float: left;
  display: none;
}
@media(max-width: 1160px) {
  /* note: the following rules do not apply on larger screens */
  .right_sidebar.lt-1160-show, .right_preview.lt-1160-show {
    display: block;
  }
  .right_sidebar.lt-1160-hide, .right_preview.lt-1160-hide {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="right_sidebar lt-1160-hide">Sidebar</div>
<div class="right_preview lt-1160-show">&rsaquo;</div>