CODEWITHSUNDEEP
jquery
Danzel
Danzel

Reputation: 41

On click show div and then hide after a certain amount of time

I have a click function to copy a link.When a user clicks the copy link button, I am displaying a 'link copied' message. How do I then remove this after a certain amount of time?

This is currently what I have written which displays the block but I can't get it to disappear after the settimeout is up.

$(function () {
    $('.copy-link').click(function () {
        setTimeout(function () {
            $('p.link-copied').css("display", "block");
        }, 200);
    });
    return false;
});

<p class="link-copied" style="display:none;">link copied</p>

Upvotes: 0

Views: 2230

Answers (2)

Sarvesh Dubey
Sarvesh Dubey

Reputation: 44

try this one it will help you*

$( document ).ready(function() {
    $("#hide").hide();
});
   
    $( "#show" ).click(function() {
    $("#hide").show();
  	 setTimeout(function () {
            $('#hide').hide();
        }, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<html>
  <div id="show">
  click me 
  </div>
  <p class="link-copied" id="hide">link copied</p>
</html>

*

Upvotes: 2

freefaller
freefaller

Reputation: 19953

Your code is showing the <p> after a delay.

The simplest thing is to copy the line outside of the setTimeout and then amend the line within the setTimeout to hide...

$(function () {
    $('.copy-link').click(function (e) {
        e.preventDefault(); // Added for the example "Click" link
        $('p.link-copied').css("display", "block");
        setTimeout(function () {
            $('p.link-copied').css("display", "none");
        }, 2000);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="copy-link">Click</a>
<p class="link-copied" style="display:none;">link copied</p>

Upvotes: 1

Related Questions