cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div style="width:900px; text-align:left; margin: 0px auto 0px auto; padding:20px;">

<span class="navpart">JS CSS Effects</span>

<br />

<div class="left">

<div style="float:left; margin:0px 20px 5px 0px;">

<div class="thing" onclick="showhide1();">001</div>

<div class="stuff" id="thedivs1">001<br />001</div>

<div class="thing" onclick="showhide2();">002</div>

<div class="stuff" id="thedivs2">002<br />002<br />002</div>

<div class="thing" onclick="showhide3();">003</div>

<div class="stuff" id="thedivs3">003<br />003<br />003<br />003</div>

</div>

<span class="bolet">Dynamic resizing:</span>

The JS measures the height of the div, resizes it to 0 on load. Use overflow:hidden; on the divs and put the script after the divs.
JS heights: <span id="theheight"></span> 

<script>

var speedy = 3;

var fullsize1 = document.getElementById("thedivs1").clientHeight;
document.getElementById("thedivs1").style.height = "0px";
var comp1;
var newsize1 = 0;
var timesize1;
var timersize1;

function showhide1() { 
if (newsize1 == 0) { showdiv1(); }
if (newsize1 == fullsize1) { hidediv1(); } }

function showdiv1() { timesize1 = setInterval( 
function count1() { newsize1 = newsize1 + speedy; 
comp1 = fullsize1 - newsize1;
document.getElementById("thedivs1").style.height = newsize1 + "px";
if (comp1 < speedy) { clearInterval(timesize1); 
document.getElementById("thedivs1").style.height = fullsize1 + "px"; 
newsize1 = fullsize1; } }, 15); }  

function hidediv1() { timersize1 = setInterval( 
function counter1() { newsize1 = newsize1 - speedy;
document.getElementById("thedivs1").style.height = newsize1 + "px";
if (newsize1 < speedy) { clearInterval(timersize1); 
document.getElementById("thedivs1").style.height = "0px"; 
newsize1 = 0; } }, 15); } 

var fullsize2 = document.getElementById("thedivs2").clientHeight;
document.getElementById("thedivs2").style.height = "0px";
var comp2;
var newsize2 = 0;
var timesize2;
var timersize2;

function showhide2() { 
if (newsize2 == 0) { showdiv2(); }
if (newsize2 == fullsize2) { hidediv2(); } }

function showdiv2() { timesize2 = setInterval( 
function count2() { newsize2 = newsize2 + speedy; 
comp2 = fullsize2 - newsize2;
document.getElementById("thedivs2").style.height = newsize2 + "px";
if (comp2 < speedy) { clearInterval(timesize2); 
document.getElementById("thedivs2").style.height = fullsize2 + "px"; 
newsize2 = fullsize2; } }, 15); }  

function hidediv2() { timersize2 = setInterval( 
function counter2() { newsize2 = newsize2 - speedy;
document.getElementById("thedivs2").style.height = newsize2 + "px";
if (newsize2 < speedy) { clearInterval(timersize2); 
document.getElementById("thedivs2").style.height = "0px"; 
newsize2 = 0; } }, 15); } 

var fullsize3 = document.getElementById("thedivs3").clientHeight;
document.getElementById("thedivs3").style.height = "0px";
var comp3;
var newsize3 = 0;
var timesize3;
var timersize3;

function showhide3() { 
if (newsize3 == 0) { showdiv3(); }
if (newsize3 == fullsize3) { hidediv3(); } }

function showdiv3() { timesize3 = setInterval( 
function count3() { newsize3 = newsize3 + speedy; 
comp3 = fullsize3 - newsize3;
document.getElementById("thedivs3").style.height = newsize3 + "px";
if (comp3 < speedy) { clearInterval(timesize3); 
document.getElementById("thedivs3").style.height = fullsize3 + "px"; 
newsize3 = fullsize3; } }, 15); }  

function hidediv3() { timersize3 = setInterval( 
function counter3() { newsize3 = newsize3 - speedy;
document.getElementById("thedivs3").style.height = newsize3 + "px";
if (newsize3 < speedy) { clearInterval(timersize3); 
document.getElementById("thedivs3").style.height = "0px"; 
newsize3 = 0; } }, 15); } 

document.getElementById("theheight").innerHTML = "1- " + fullsize1 + " | 2- " + fullsize2 + " | 3- " + fullsize3;

</script>

<br /><br />

var speedy = 3;
&nbsp;
var fullsize1 = document.getElementById("thedivs1").clientHeight;
&nbsp;
document.getElementById("thedivs1").style.height = "0px";
&nbsp;
var comp1;
&nbsp;
var newsize1 = 0;
&nbsp;
var timesize1;
&nbsp;
var timersize1;
<br /><br />
function showhide1() { 
if (newsize1 == 0) { showdiv1(); }
&nbsp;
if (newsize1 == fullsize1) { hidediv1(); } }
<br /><br />
function showdiv1() { timesize1 = setInterval( 
&nbsp;
function count1() { newsize1 = newsize1 + speedy; 
&nbsp;
comp1 = fullsize1 - newsize1;
&nbsp;
document.getElementById("thedivs1").style.height = newsize1 + "px";
&nbsp;
if (comp1 &lt; speedy) { clearInterval(timesize1); 
&nbsp;
document.getElementById("thedivs1").style.height = fullsize1 + "px"; 
&nbsp;
newsize1 = fullsize1; } }, 15); }  
<br /><br />
function hidediv1() { timersize1 = setInterval( 
&nbsp;
function counter1() { newsize1 = newsize1 - speedy;
&nbsp;
document.getElementById("thedivs1").style.height = newsize1 + "px";
&nbsp;
if (newsize1 &lt; speedy) { clearInterval(timersize1); 
&nbsp;
document.getElementById("thedivs1").style.height = "0px"; 
&nbsp;
newsize1 = 0; } }, 15); } 
<br /><br />
var fullsize2 = document.getElementById("thedivs2").clientHeight;
&nbsp;
document.getElementById("thedivs2").style.height = "0px";
&nbsp;
var comp2;
&nbsp;
var newsize2 = 0;
&nbsp;
var timesize2;
&nbsp;
var timersize2;
<br /><br />
function showhide2() { if (newsize2 == 0) { showdiv2(); }
&nbsp;
if (newsize2 == fullsize2) { hidediv2(); } }
<br /><br />
function showdiv2() { timesize2 = setInterval( 
&nbsp;
function count2() { newsize2 = newsize2 + speedy; 
&nbsp;
comp2 = fullsize2 - newsize2;
&nbsp;
document.getElementById("thedivs2").style.height = newsize2 + "px";
&nbsp;
if (comp2 &lt; speedy) { clearInterval(timesize2); 
&nbsp;
document.getElementById("thedivs2").style.height = fullsize2 + "px"; 
&nbsp;
newsize2 = fullsize2; } }, 15); }  
<br /><br />
function hidediv2() { timersize2 = setInterval( 
&nbsp;
function counter2() { newsize2 = newsize2 - speedy;
&nbsp;
document.getElementById("thedivs2").style.height = newsize2 + "px";
&nbsp;
if (newsize2 &lt; speedy) { clearInterval(timersize2); 
&nbsp;
document.getElementById("thedivs2").style.height = "0px"; 
&nbsp;
newsize2 = 0; } }, 15); } 
<br /><br />
var fullsize3 = document.getElementById("thedivs3").clientHeight;
&nbsp;
document.getElementById("thedivs3").style.height = "0px";
&nbsp;
var comp3;
&nbsp;
var newsize3 = 0;
&nbsp;
var timesize3;
&nbsp;
var timersize3;
<br /><br />
function showhide3() { 
&nbsp;
if (newsize3 == 0) { showdiv3(); }
&nbsp;
if (newsize3 == fullsize3) { hidediv3(); } }
<br /><br />
function showdiv3() { timesize3 = setInterval( 
&nbsp;
function count3() { newsize3 = newsize3 + speedy; 
&nbsp;
comp3 = fullsize3 - newsize3;
&nbsp;
document.getElementById("thedivs3").style.height = newsize3 + "px";
&nbsp;
if (comp3 &lt; speedy) { clearInterval(timesize3); 
&nbsp;
document.getElementById("thedivs3").style.height = fullsize3 + "px"; 
&nbsp;
newsize3 = fullsize3; } }, 15); }  
<br /><br />
function hidediv3() { timersize3 = setInterval( 
&nbsp;
function counter3() { newsize3 = newsize3 - speedy;
&nbsp;
document.getElementById("thedivs3").style.height = newsize3 + "px";
&nbsp;
if (newsize3 &lt; speedy) { clearInterval(timersize3); 
&nbsp;
document.getElementById("thedivs3").style.height = "0px"; 
&nbsp;
newsize3 = 0; } }, 15); } 

<br /><br />

<div class="showbor" style="float:right; display:inline-block; padding:5px; margin:0px 0px 10px 20px;">

<table> <tr> <td>

<div style="height:50px; width:100px; overflow:hidden; margin:0px auto 0px auto;">

<div style="z-index:2; position: relative; padding:0px; margin:0px; width:50px; height:50px; background-color:#ff9adc;"></div>

<script> var status1 = 0; var status2 = 0; var status3 = 0; </script>

<div class="jsmoves" id="section1" style="top:-50px;"><br />001</div>

<script>

function show1() { status1 = 1;

if (status2 == 1) { document.getElementById("section2").style.animation = "partin 1s 1"; 
document.getElementById("section2").style.left = "0px"; status2 = 0; }

if (status3 == 1) { document.getElementById("section3").style.animation = "partin 1s 1"; 
document.getElementById("section3").style.left = "0px"; status3 = 0; }

document.getElementById("section1").style.left = "0px";
document.getElementById("section1").style.animation = "partout 1s 1"; 
document.getElementById("section1").style.left = "50px"; }

</script>

<div class="jsmoves" id="section2" style="top:-100px;"><br />002</div>

<script>

function show2() { status2 = 1;

if (status1 == 1) { document.getElementById("section1").style.animation = "partin 1s 1"; 
document.getElementById("section1").style.left = "0px"; status1 = 0; }

if (status3 == 1) { document.getElementById("section3").style.animation = "partin 1s 1"; 
document.getElementById("section3").style.left = "0px"; status3 = 0; }

document.getElementById("section2").style.left = "0px";
document.getElementById("section2").style.animation = "partout 1s 1"; 
document.getElementById("section2").style.left = "50px"; }

</script>

<div class="jsmoves" id="section3" style="top:-150px;"><br />003</div>

<script> 

function show3() { status3 = 1;

if (status1 == 1) { document.getElementById("section1").style.animation = "partin 1s 1"; 
document.getElementById("section1").style.left = "0px"; status1 = 0; }

if (status2 == 1) { document.getElementById("section2").style.animation = "partin 1s 1"; 
document.getElementById("section2").style.left = "0px"; status2 = 0; }

document.getElementById("section3").style.left = "0px";
document.getElementById("section3").style.animation = "partout 1s 1"; 
document.getElementById("section3").style.left = "50px"; }

</script>

<script>

function hide() { status1 = 0; status2 = 0; status3 = 0;

document.getElementById("section1").style.animation = "partin 1s 1"; 
document.getElementById("section2").style.animation = "partin 1s 1"; 
document.getElementById("section3").style.animation = "partin 1s 1"; 

document.getElementById("section1").style.left = "0px";
document.getElementById("section2").style.left = "0px";
document.getElementById("section3").style.left = "0px"; }

</script>

</div> <br />

</td> 

</tr> <tr>

<td>

<div style="position: relative; left:0px;">

<span class="textlink" onclick="show1();">001</span> | 

<span class="textlink" onclick="show2();">002</span> | 

<span class="textlink" onclick="show3();">003</span> | 

<span class="textlink" onclick="hide();">reset</span> 

</div>

</td> </tr> </table> </div>

<span class="bolet">JS with CSS keyframes:</span> To make animations reusable you can run a different one for that id.

Use CSS position and z-index to arrange the sections in the same place and overflow to stop the page from stretching. 

<br /><br />

<span class="bolet">CSS:</span> &nbsp;

.jsmoves { position: relative; width:48px; height:48px; padding:0px; text-align:center; 
border: 1px solid #0047ab; background-color:#00bfff; margin:0px; z-index:1; }
&nbsp;
@keyframes partout { 0% { left:0px; } 100% { left:50px; } }
&nbsp;
@keyframes partin { 0% { left:50px; } 100% { left:0px; } }

<br /><br />

<span class="bolet">HTML and Java Script:</span> &nbsp;

&lt;div style="height:50px; width:100px; overflow:hidden;"&gt;
<br />
&lt;div style="z-index:2; position: relative; padding:0px; margin:0px; width:50px; height:50px; background-image:url(design/Unicorn.gif);"&gt;&lt;/div&gt;
<br />
&lt;script&gt; var status1 = 0; var status2 = 0; var status3 = 0; &lt;/script&gt;
<br /><br />
&lt;div class="jsmoves" id="section1" style="top:-50px;"&gt;&lt;br /&gt;001&lt;/div&gt;
&nbsp;
&lt;script&gt; 
&nbsp;
function show1() { status1 = 1; 
&nbsp;
if (status2 == 1) { document.getElementById("section2").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section2").style.left = "0px"; status2 = 0; }
&nbsp;
if (status3 == 1) { document.getElementById("section3").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section3").style.left = "0px"; status3 = 0; }
&nbsp;
document.getElementById("section1").style.left = "0px";
&nbsp;
document.getElementById("section1").style.animation = "partout 1s 1"; 
&nbsp;
document.getElementById("section1").style.left = "50px"; } 
&nbsp;
&lt;/script&gt;
<br /><br />
&lt;div class="jsmoves" id="section2" style="top:-100px;"&gt;&lt;br /&gt;002&lt;/div&gt;
&nbsp;
&lt;script&gt; 
&nbsp;
function show2() { status2 = 1;
&nbsp;
if (status1 == 1) { document.getElementById("section1").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section1").style.left = "0px"; status1 = 0; }
&nbsp;
if (status3 == 1) { document.getElementById("section3").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section3").style.left = "0px"; status3 = 0; }
&nbsp;
document.getElementById("section2").style.left = "0px";
&nbsp;
document.getElementById("section2").style.animation = "partout 1s 1"; 
&nbsp;
document.getElementById("section2").style.left = "50px"; } 
&nbsp;
&lt;/script&gt;
<br /><br />
&lt;div class="jsmoves" id="section3" style="top:-150px;"&gt;&lt;br /&gt;003&lt;/div&gt;
&nbsp;
&lt;script&gt; 
&nbsp;
function show3() { status3 = 1;
&nbsp;
if (status1 == 1) { document.getElementById("section1").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section1").style.left = "0px"; status1 = 0; }
&nbsp;
if (status2 == 1) { document.getElementById("section2").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section2").style.left = "0px"; status2 = 0; }
&nbsp;
document.getElementById("section3").style.left = "0px";
&nbsp;
document.getElementById("section3").style.animation = "partout 1s 1"; 
&nbsp;
document.getElementById("section3").style.left = "50px"; } 
&nbsp;
&lt;/script&gt;
<br /><br />
&lt;script&gt; 
&nbsp;
function hide() { status1 = 0; status2 = 0; status3 = 0;
&nbsp;
document.getElementById("section1").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section2").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section3").style.animation = "partin 1s 1"; 
&nbsp;
document.getElementById("section1").style.left = "0px";
&nbsp;
document.getElementById("section2").style.left = "0px";
&nbsp;
document.getElementById("section3").style.left = "0px"; } 
&nbsp;
&lt;/script&gt;

&nbsp; &lt;/div&gt;

</div>
<br />
<a href="http://azurelight.net">AzureLight.net</a> | 
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> | 
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> | 
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
            
          
!
            
              body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px; 
color:#393939; background-color:#c2f0ff; text-align:center; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }

.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; } 

a { color:#ff71ce; text-decoration:none; }

input, textarea, select, option, button { color:#393939;
font-family:Arial; font-size:14px; line-height:17px;
overflow:hidden; background-color: #fff8bb;  
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px; } 

*:focus { outline:none; }

.jsmoves { position: relative; width:48px; height:48px; padding:0px; text-align:center; 
border: 1px solid #0047ab; background-color:#00bfff; margin:0px; z-index:1; color:#00396a; }

@keyframes partout { 0% { left:0px; } 100% { left:50px; } }
@keyframes partin { 0% { left:50px; } 100% { left:0px; } }

.stuff { width:80px; padding:0px; text-align:center; overflow:hidden;
border: 0px none; margin:0px; }

.thing { width:80px; height:20px; padding:0px; text-align:center; 
border: 1px solid #0047ab; background-color:#87cefa; margin:0px; color:#00396a; }

            
          
!
999px
Loading ..................

Console