asked on

MAke this code reverse also - retract div

The following code works but I also want to have it close back up the way it opens via a link in the layer? I would also like to have a variable set that could control the speed both ways??
----------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#slidingLayer{
width:400px;
height:1px;
position:absolute;
left:150px;
top:0px;
overflow:hidden;
background-color:#666666;
display:none;
border:1px solid #000000;
border-bottom:4px outset #444444;
padding:5px;
font-family:garamond;
line-height:150%;
color:#FFFFFF;
}
#slidingContent{
position:absolute;

}
</style>
<script type="text/javascript">
var slidingObj;
var contentObj;
var counter = 0;
var sliderHeight = 150;
function initSlide(){
slidingObj = document.getElementById('slidingLayer');
contentObj = document.getElementById('slidingContent');
slidingObj.style.display='block';
sliderHeight = contentObj.offsetHeight/1 + 10;
contentObj.style.top = (slidingObj.style.top.replace('px','') - sliderHeight) + 'px';

startSlide();
}

function startSlide(){
var theHeight = slidingObj.style.height.replace('px','');
if(theHeight/1<sliderHeight && counter<13000){
theHeight = theHeight /1 + 3;
slidingObj.style.height = theHeight + 'px';
contentObj.style.top = (contentObj.style.top.replace('px','')/1 + 3) + 'px'
setTimeout('startSlide()',20);
counter++;
}
if(theHeight/1>=sliderHeight/1){
slidingObj.style.borderBottom = '1px solid #000000';
}
}
window.onload=initSlide
</script>
</head>
<body>
<h1>This is a test</h1>
<div id="slidingLayer">
<span id="slidingContent">
This is the content of this<br>
Sliding layer<br>
This is the third<br>
and fourth line<br>
Fifth line
</span>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

Batalf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Batalf

The same code as above, but with the link formatted and within the layer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#slidingLayer{
width:400px;
height:1px;
position:absolute;
left:150px;
top:0px;
overflow:hidden;
background-color:#666666;
display:none;
border:1px solid #000000;
border-bottom:4px outset #444444;
padding:5px;
font-family:garamond;
line-height:150%;
color:#FFFFFF;
}
#slidingLayer a{
color: orange;
}
#slidingContent{
position:absolute;

}
</style>
<script type="text/javascript">
var slidingObj;
var contentObj;
var counter = 0;
var sliderHeight = 150;
var speed = 3;
function initSlide(){
speed = 3;
slidingObj = document.getElementById('slidingLayer');
contentObj = document.getElementById('slidingContent');
slidingObj.style.display='block';
sliderHeight = contentObj.offsetHeight/1 + 10;
contentObj.style.top = (slidingObj.style.top.replace('px','') - sliderHeight) + 'px';

startSlide();
}

function startSlide(){
var theHeight = slidingObj.style.height.replace('px','');
if((speed>0 && theHeight/1<sliderHeight && counter<13000) || (speed<0 && theHeight>0)){
theHeight = theHeight /1 + speed;
slidingObj.style.height = theHeight + 'px';
contentObj.style.top = (contentObj.style.top.replace('px','')/1 + speed) + 'px'
setTimeout('startSlide()',20);
counter++;
}
if(theHeight/1>=sliderHeight/1){
slidingObj.style.borderBottom = '1px solid #000000';
}
if(speed<0 && theHeight<=0){
slidingObj.style.display='none';
}
}

function hideLayer(){
speed = -3;
slidingObj.style.display='block';
startSlide();
}
window.onload=initSlide
</script>
</head>
<body>
<h1>This is a test</h1>
<div id="slidingLayer">
<span id="slidingContent">
This is the content of this<br>
Sliding layer<br>
This is the third<br>
and fourth line<br>
Fifth line<br>
<a href="#" onclick="hideLayer();return false">Roll up</a> <br>
</span>
</div>

<a href="#" onclick="initSlide();return false">Roll down</a> <br>
</body>
</html>