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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console