When a div slides down on page load, the div will slide up when a button is clicked

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>

Answer №1

There are a couple of issues to address:

  • Make sure to include the hash sign in your selector: $('mybutton').click...
  • Avoid attaching the click handler before the element actually exists

To resolve these problems, consider the following code snippet:

$(document).ready(function() {
    $("#mydiv").slideUp(1).delay(2000).slideDown('slow');
    $("#mybutton").click(function() {
        $("#mydiv").slideUp();      // The issue may lie here
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts. The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined b ...

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

Creating CSS style rules for aligning table column headers in JavaFXML

Is it possible to style columns individually in a tableview? I have been attempting to make some column headers left-aligned and others right-aligned, as shown below: | hdr1 | hdr2 | hdr3 | hdr4 | In my css stylesheet, I experimented with the following ...

Toggling siblings in jQuery when focusing and blurring

Currently, I have this setup that seems to be functioning well. However, I am looking for an optimal way to write it as I am creating a mobile site where performance is crucial. Imagine a tooltip that slides down (toggles) under the element. There are app ...

Several user controls are present on the page, but only the final control is being accessed

I've developed a custom UserControl that enables users to upload and view files within a GridView. The issue arises when I embed this UserControl multiple times in a jQuery tab control on the parent page. Even though the second instance functions prop ...

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

Managing the "Accept Cookies" notification using Selenium in JavaScript

As I use Selenium to log in and send messages on a specific website, I am faced with a cookie popup that appears each time. Unfortunately, clicking the accept button to proceed seems to be quite challenging for me. Here is an image of the cookie popup Th ...

Adding space around images in JavaFX

Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...

How to specifically target elements on a particular level using jQuery

Trying to use jQuery to select elements on a specific level only. They must be direct children of #main->table and have the class x. Attempting something like $('#main>table .column'); yields three elements, including the second-level div ...

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

What is the method for displaying an array in JavaScript?

When a user clicks the value 3 input box, three input boxes will appear where they can enter values. However, when trying to submit the array, no elements are printed and an error message "Element is not defined" appears. var arr = [0]; function get_va ...

The appearance of the circle in Safari is rough and lacks smoothness

My circle animation works perfectly on Google Chrome, but when I switch to Safari the edges appear faded and blurry. I tried adding "webkit" to fix it, but had no luck. Is there a compatibility issue with Safari and CSS animations? Here is my code: Snapsh ...

Improved Autocomplete Feature with Typeahead 3 and Bootstrap for Identifying Names and IDs

I am currently a beginner programmer with a basic understanding of PHP and jQuery. My goal is to implement an autocomplete feature on my website, where users can start typing in a text box and receive suggestions from a PHP page containing user names and ...

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

Currently, I am developing an Angular table with the cdk Virtual Scroll feature. Is there a method to adjust the scroll viewport's height dynamically? While the standard style property works, I am encountering difficulties setting the value using ngSt ...

Minimize the amount of space between two heading elements

Is there a way to decrease the distance between two heading tags? I want the h2 tag to be nearer to the h1 tag. Here is the CodeSandbox link for reference: https://codesandbox.io/s/rough-framework-tsk5b ...