CODEWITHSUNDEEP
javascripthtmlcss
user2990762
user2990762

Reputation: 41

onclick show div and after some seconds hide my shown div

I need some help with my button. i want when i click on the button (click me) the hidden div should be display but after some seconds my hidden div hide automatically. Thanks !!

Here the code is :

<!DOCTYPE html>
<html>
<head>
  <style>
    .show {
         -o-transition: opacity 3s;
         -moz-transition: opacity 3s;
         -webkit-transition: opacity 3s;
         transition: opacity 3s;
      opacity:1;
    }
    .hide{  opacity:0; }
  </style>
  <script>
    function ShowSecond()
    {
      var div2 = document.getElementById("div2");
      div2.className="show";
    }
  </script>
</head>
<body>
<div id="div1" class="show">
  First Div
  <button onclick="ShowSecond()">clickMe</button>
  </div>
  <div id="div2" class="hide">
    Hidden Div
  </div>
</body>
</html>

Upvotes: 1

Views: 8150

Answers (6)

Lonare
Lonare

Reputation: 4673

If you are using bootstrap css and want plain javascript to invoke this event then you can use function below:

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.className = "d-block";
        setTimeout(function() {
         div2.className="d-none";
        }, 6000);
    }
}, false);

Or if you are not using bootstrap then you can use

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.style.display= 'block';
        setTimeout(function() {
         div2.style.display = 'none';
        }, 6000);
    }
}, false);

Upvotes: 0

Andrea Ligios
Andrea Ligios

Reputation: 50203

You can also use CSS3 animation instead of transition: running demo

HTML

<button onclick="animate()">clickMe</button>
<div id="hiddenDiv1" class="hideOnStart">
    Hidden Div
</div>

JS

function animate() {
    var s = document.getElementById("hiddenDiv1").style;
    s.animationName = 'showAndHide';
    s.animationDuration = '3s';
}

CSS

@keyframes showAndHide {
      0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0; }    
}

.hideOnStart{
    opacity: 0;
}

Obviously it needs to be prefixed to be cross browser, and the plain JavaScript is just to stick to your code, using jQuery will take care of this things automatically.

Upvotes: 0

Sherwyn Goh
Sherwyn Goh

Reputation: 1352

You want the setTimeout() function

setTimeout(function() {
  // Do something after 5 seconds
}, 5000);

Upvotes: 1

Praveen
Praveen

Reputation: 56509

Simply use setTimeout to perform time-delay operations.

function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    var timeOut = setTimeout(function () {
        div2.className = "hide";
    }, 2000);
}

JSFiddle

reason why I used setTimeout(..) to a variable timeOut: In future you may need to cancel this timeout operation, which can be done as clearTimeout(timeOut)

Upvotes: 0

MysticEarth
MysticEarth

Reputation: 2816

You can use the setTimeout function for this:

setTimeout(function() { // your code here }, 1000);

This will execute the function after 1 second.

If you want to use jQuery, you can use the .delay() function for this: $(element).show().delay(1000).hide();

More info: https://api.jquery.com/delay/

Upvotes: 3

Blu
Blu

Reputation: 4056

In your ShowSecond function do the following

 function ShowSecond()
 {
     var div2 = document.getElementById("div2");
     div2.className="show";
     setTimeout(function() {
        div2.className="hide";
     }, 3000);
 }

By above code your div will hide after 3s. time is your choice increase or decrease as your requirement

Upvotes: 2

Related Questions