sliding div's out of sight and delays *UPDATED2 with CODE* [70% SOLVED]
hey
I want to make a webpage with 6 div's:
one on the left and contains the buttons to control the others and occupies half the page -left half-
2nd that upon a button press from the 2nd slides down in the middle
the others occupy the right half of the page and are behind each others and are viewed up button click on the 1st, on 1st click the 2nd comes down in the middle and the 1st one of the right divs slides out of sight and makes the one behind it visible, on second button the one behind it slides out of sight and makes the one behind THAT one visible
my problem is only ONE part of the sliding div's is sliding and then they just disappear, and i want to be able 2 force a delay between actions, and the 2nd div that is supposed 2 slide down is actually sliding UP :s
help please
1st things first does anyone know how do i hide a div on button click and show the one behind it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 605px;
overflow: hidden;
text-align: center;
}
.boxL {
position:absolute;right:50%;
width: 300px;
height:100%;
}
.boxM {
display:none;
position: absolute;
width:2px;
height: 100%;
line-height: 300px;
font-size: 10px;
left: 50%;
right: 50%;
z-index:2;
}
.boxR {
position:absolute; left:50%;
width: 300px;
height:100%;
}
#box1 {
background-color: green;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
#box6 {
background-color: black;
}
#box7 {
background-color: grey;
}
#box8 {
background-color: purple;
}
p { color:red; margin:5px; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div id="container">
<div id="box1" class="boxL"><p>Div #1</p></div>
<div id="box2" class="boxL"><p>Div #2</p></div>
<div id="box3" class="boxM"><p>Div #3</p></div>
<div id="box4" class="boxR"><p>Div #4</p></div>
<div id="box5" class="boxR"><p>Div #5</p></div>
<div id="box6" class="boxR"><p>Div #6</p></div>
<div id="box7" class="boxR"><p>Div #7</p></div>
<div id="box8" class="boxR"><p>Div #8</p></div>
</div>
<script>
$("p").click(function () {
$('#box2').hide();
$('#box3').slideDown();
$('#box8').slideUp().delay(10000);
});
</script>
</body>
</html>
Update 2 question: how do i make #box8 slide to the right out of side