Your code is rather messy.
Here's a JSFiddle of what you've got at the moment:
Edit fiddle - JSFiddle - Code Playground[
^]
Just about all of your script can be replaced by media queries:
Using media queries - CSS: Cascading Style Sheets | MDN[
^]
@media (max-width: 799px) {
.dva, .dvb, .dvc, .dvd, span {
display: none;
}
.btn1a, .btn2a, .btn1b, .btn2b, .btn1c, .btn2c, .btn1d, .btn2d {
display: initial;
}
.article {
display: block;
}
}
@media (min-width: 800px) {
.dva, .dvb, .dvc, .dvd, span {
display: initial;
}
.btn1a, .btn2a, .btn1b, .btn2b, .btn1c, .btn2c, .btn1d, .btn2d {
display: none;
}
.article {
display: inline-block;
}
}
The button click event handlers should be added
outside of the resize event handler:
$(".btn1a").click(function() {
$(".dva").slideUp();
});
$(".btn1b").click(function() {
$(".dvb").slideUp();
});
$(".btn1c").click(function() {
$(".dvc").slideUp();
});
$(".btn1d").click(function() {
$(".dvd").slideUp();
});
$(".btn2a").click(function() {
$(".dva").slideDown();
});
$(".btn2b").click(function() {
$(".dvb").slideDown();
});
$(".btn2c").click(function() {
$(".dvc").slideDown();
});
$(".btn2d").click(function() {
$(".dvd").slideDown();
});
That just leaves your resize function updating the label to show the window size. You should use
innerWidth
/
innerHeight
instead of
outerWidth
/
outerHeight
, since you only want to know about the space available to your document, not the entire browser window. You should attach the event handler through code, rather than the
onresize
attribute on the body. And you should invoke the handler once when the page loads, so that the label is updated immediately rather than waiting for the user to resize the window.
function myFunction() {
let w = window.innerWidth;
let h = window.innerHeight;
let txt = `Window size: width=${w}, height=${h}`;
document.getElementById("demo").innerHTML = txt;
}
window.addEventListener("resize", myFunction);
myFunction();
Here's the updated code:
Edit fiddle - JSFiddle - Code Playground[
^]