Hide div for some time

Question

How can i hide one dive for 10 seconds or for 1 minute using jquery/jvascript before site loads?
I know about setTimeout function, but it is used for hide dive after some time. but i want to hide div before sites load.

once my whole site get load, after that, that div can be seen.. — Pathik Vejani, Sep 11 '15 at 17:13
Duplicate: http://stackoverflow.com/questions/14636362/show-div-after-2-seconds-of-page-load or http://stackoverflow.com/questions/18634783/jquery-hide-show-a-div-after-a-duration-on-page-load (There are more, did you even look?) — Mogsdad, Sep 11 '15 at 17:18
Or for "once my whole site get load, after that, that div can be seen.." [this](http://stackoverflow.com/q/23090493/1677912) is close, but you can just use the documentation for `$(document).ready(function() { ... });`. — Mogsdad, Sep 11 '15 at 17:23
*"but after some time i want that dive back..*" So use a setTimeout and show it... — epascarello, Sep 11 '15 at 17:25

Pranav C Balan · Accepted Answer · 2015-09-11T17:35:05.640

5

You can hide initially using the css display:none
setTimeout() for setting a delay
show() for showing hidden element

Snippet :

setTimeout(function() {
  $('#hide').show()
}, 4000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide" style="display:none">hidden</div>

Also you can use visibility in css

You can hide initially using the css visibility:hidden
setTimeout() for setting a delay
css() for showing hidden element

Snippet :

setTimeout(function() {
  $('#hide').css('visibility','visible')
}, 4000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide" style="visibility:hidden">hidden</div>

edited Sep 11 '15 at 17:35

answered Sep 11 '15 at 17:13

Pranav C Balan

113,687
23
165
188

it working.. but there is problem.. text are not displaying which are in that div.. :( – Pathik Vejani Sep 11 '15 at 17:19
@bluto : may be due to it's child elements inheriting display property from it's parent – Pranav C Balan Sep 11 '15 at 17:21
actually in that div there is slider.. and that slider contains text and images – Pathik Vejani Sep 11 '15 at 17:21
@bluto : check second method – Pranav C Balan Sep 11 '15 at 17:26
1

@bluto : glad to help – Pranav C Balan Sep 11 '15 at 17:45

score 4 · Answer 2 · answered Sep 11 '15 at 17:15

This code will show the div once the document is ready.

$(document).ready(function() {
  $("#initalHidden").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="initalHidden" style="display:none">
  <h1>Hidden until loaded</h1>
</div>

score 1 · Answer 3 · answered Sep 11 '15 at 17:16

make div display style to none
so it will be hidden before pageload

<div  id='target' style='display:none;'>This di will appear after 10 seconds  of page load</div>
<script>
   $(function(){
        setTimeout(function(){ showTarget(); }, 10000);
   });
   function showTarget(){
       $("#target").show();
   }
</script>

score 0 · Answer 4 · answered Sep 11 '15 at 17:15

0

If it starts shown hide it,but better approach is to start hidden with CSS.

$(function() {
       var yourDiv = $("#yourDiv");
        yourDiv.hide();
        setTimeout(function(){
            $("#yourDiv").show();
        }, 10*1000);
    });

answered Sep 11 '15 at 17:15

Saar

2,276
1
16
14

score 0 · Answer 5 · answered Sep 11 '15 at 17:20

suppose a div which id is MyDiv will have the effect you are looking for,

first i will set the css of the MyDiv hidden or display to none

#MyDiv
{
 display : none; 
}

or

#MyDiv
{
visibility: hidden; 
}

then it will remain hidden until the site loads and you change it through javascript.

in javascript after the desired time you just grab the element and make it visible

example in jquery:

$("#MyDiv").show();

Hide div for some time

5 Answers5