The interaction between your CSS and the JavaScript code that handles the visibility of the 'divs' on different screen sizes seems to be your problem.
I have added a new CSS class called '.mobile-layout' that hides the '.dva' and '.dvb' divs when applied. In your JavaScript section, I am also adding and removing the '.mobile-layout' class to your 'body' element based on the window width. This will control the visibility of your divs on mobile screens -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.mobile-layout .dva,
.mobile-layout .dvb {
display: none;
}
</style>
</head>
<body onresize="myFunction()">
<p>Try to resize the browser window to display the window's height and width.</p>
<p id="demo"></p>
<div class="article">
<div class="dv1"><button class="btn2a">Slide down Drinks</button></div>
<div class="dva">
<h3>List of Drinks:</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<button class="btn1a">Slide up</button>
</div>
<div class="article">
<div class="dv1"><button class="btn2b">Slide down Alcohols</button></div>
<div class="dvb">
<h3>List of Alcohols:</h3>
<ul>
<li>Beer</li>
<li>Vine</li>
<li>Spirits</li>
</ul>
</div>
<button class="btn1b">Slide up</button>
</div>
<script>
$(document).ready(function(){
});
function myFunction() {
let w = window.outerWidth;
let h = window.outerHeight;
let txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
if (w < 800) {
$("body").addClass("mobile-layout");
} else {
$("body").removeClass("mobile-layout");
}
}
</script>
</body>
</html>