Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning.
To achieve this functionality, I utilized the following jQuery script:
$('.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');
});
Essentially, I initially hide the preview when the browser viewport exceeds 1160px and keep the sidebar visible. However, under 1160px in the media query, the sidebar is hidden while the "sidebar preview" becomes visible for users to expand upon clicking.
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%;
}
}
In using the aforementioned code, suppose we are within the less than 1160px media query, and after expanding and collapsing the sidebar, upon resizing the browser past 1160px again, it also closes the sidebar in the greater than 1160px media query.
Hence, I am curious if there exists a method like .css() (or any alternative means) to target a specific media query?