I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z-indexed button is clicked using the code below. Nothing happens when the button is clicked.
As a beginner in jQuery, I am really stuck on this issue. Any help would be greatly appreciated. Thank you!
<html>
<head>
<title>slideDown</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mydiv").slideUp(1).delay(2000).slideDown('slow');
$("#mybutton").click(function() {
$("#mydiv").slideUp(); // seems like the problem lies here
});
});
</script>
<style type="text/css">
img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Here is some text with an image and a button that will appear after 2 seconds. Clicking the button will slide up the div.</h2>
<div id="mydiv">
<button id="mybutton">z-indexed</button>
<img src="php.jpg">
</div>
</body>
</html>