Databases
StackOverflow2013
Postsdbo
POhow to time text appearence onclick using only javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to time text appearence onclick using only javascript
    text
    copied!<p>okay, this one is tough to explain first of all here is my complete code-</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body{ margin: 0px; height: 100%; } #div{} #eiv{} #fiv{} #giv{} .main{ width:100%; height:100%; position:absolute; overflow:hidden; } .main .sec1{ width:50%; height:50%; top:0%; left:0%; position:absolute; background: #0e83cd; } .main .sec2{ width:50%; height:50%; top:0%; left:50%; position:absolute; background: #7abe93; } .main .sec3{ width:50%; height:50%; top:50%; left:0%; position:absolute; background: #f06060; } .main .sec4{ width:50%; height:50%; top:50%; left:50%; position:absolute; background: #ffa366; } .main .active1{ width: 100%; overflow: auto; height: 100%; background: #0e83cd; position: relative; z-index: 300; } .main .active2{ width: 100%; overflow: auto; height: 100%; background: #7abe93; position: relative; z-index: 300; } .main .active3{ width: 100%; overflow: auto; height: 100%; background: #f06060; position: relative; z-index: 300; } .main .active4{ width: 100%; overflow: auto; height: 100%; background: #ffa366; position: relative; z-index: 300; } &lt;/style&gt; &lt;script&gt; function myFunc1() { if(document.getElementById('div').className == 'sec1') { document.getElementById('div' ).className = 'active1'; document.getElementById('div').style.webkitTransition ='all 0.5s'; } else { document.getElementById("div").className = 'sec1'; document.getElementById('div').style.webkitTransition ='all 0.5s'; } } function myFunc2() { if(document.getElementById('eiv').className == 'sec2') { document.getElementById('eiv' ).className = 'active2'; document.getElementById('eiv').style.webkitTransition ='all 0.5s'; } else { document.getElementById("eiv").className = 'sec2'; document.getElementById('eiv').style.webkitTransition ='all 0.5s'; } } function myFunc3() { if(document.getElementById('fiv').className == 'sec3') { document.getElementById('fiv' ).className = 'active3'; document.getElementById('fiv').style.webkitTransition ='all 0.5s'; } else { document.getElementById("fiv").className = 'sec3'; document.getElementById('fiv').style.webkitTransition ='all 0.5s'; } } function myFunc4() { if(document.getElementById('giv').className == 'sec4') { document.getElementById('giv' ).className = 'active4'; document.getElementById('giv').style.webkitTransition ='all 0.5s'; } else { document.getElementById("giv").className = 'sec4'; document.getElementById('giv').style.webkitTransition ='all 0.5s'; } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="main"&gt; &lt;div id="div" class="sec1" onclick="myFunc1()"&gt;blah&lt;/div&gt; &lt;div id="eiv" class="sec2" onclick="myFunc2()"&gt;blah&lt;/div&gt; &lt;div id="fiv" class="sec3" onclick="myFunc3()"&gt;blah&lt;/div&gt; &lt;div id="giv" class="sec4" onclick="myFunc4()"&gt;blah&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>what i want to acheive is this - <a href="http://tympanus.net/Development/FullscreenLayoutPageTransitions/" rel="nofollow">http://tympanus.net/Development/FullscreenLayoutPageTransitions/</a></p> <p>i want the code to make a heading appear and onclick the heading dissapears and the content comes into display after a time (say 0.5 seconds) and when you close it(i want the closing to happen from the cross symbol, not the div as it does now) the content dissapears but the header comes after it has retracted(0.5 seconds)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload