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>
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>
- As my ans is same so only adding demo link. jsfiddle/k2Ggx/1 – Neha Commented Mar 3, 2014 at 9:46
6 Answers
Reset to default 3You 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./delay/
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
You want the setTimeout() function
setTimeout(function() {
// Do something after 5 seconds
}, 5000);
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)
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.
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);