http://joe-riggs.com/test/test_acc.html
First click 'Step 1' Then click 'Step 2' Before the div slides up, it pushes down for second (look at the bottom of the div). This happens on all of the divs. What's causing this? Not sure if it's related but the number images are mangled in Chrome - the other major browsers seem to be handling the mark-up well.
Less important question: How do I code so that only 'Step 1' is open when the page first loads?
EDIT: removing the <p> tags around the dummy text and the margins has got me pretty close
ps - I am aware of the accordian plugin, but this method meets all of my requirements :)
<!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>
<style type="text/css" media="screen">
/*<![CDATA[*/
<!--
div.basic{
margin-left: auto ;
margin-right: auto ;
border-style:solid;
width:750px;
}
div.top-level {
/*background-color: #FBEC5D;*/
border-style:solid;
border-color:#0000FF;
margin: 20px 20px 0px 20px;
background: url(light_pink_bg.gif) repeat-y 9px;
}
div.content{
background-color: #EEEEEE;
border-style: dotted;
margin: 5px 5px 5px 48px;
}
.arrow_down
{
background: url(arrow_down.gif) no-repeat 32px 0;
height: 17px;
}
.top-header
{
display: inline;
margin: 0px 0px 30px 25px;
}
.top-text
{
/*display: inline;*/
margin: 25px 0px 10px 60px;
}
.step-number
{
/*display: inline;*/
height:100%;
}
.active_cnt
{
background: url(light_pink_bg.gif) repeat-y 9px;
}
.step-number img
{
float:left;
height:100%;
}
-->
/*]]>*/
</style>
<script type="text/javascript" src=
"jquery.js">
</script>
<script type="text/javascript" src="jr.js">
</script>
<title></title>
</head>
<body>
<div style="float:left;">
<a href="#" id="step-1" name="close">step 1</a><br />
<a href="#" id="step-2" name="close">step 2</a><br />
<a href="#" id="step-3" name="close">step 3</a><br />
<a href="#" id="step-4" name="close">step 4</a><br /><br />
<a href="#" id="close-all" name="close">hide all</a><br />
<a href="#" id="show-all" name="close">show all</a><br />
</div>
<div class="basic" id="list1a">
<div class="top-level">
<div class="step-number">
<img src="1.png" alt ="1" height="45px" width="45px" />
</div>
<div class="top-text">Step 1</div>
<div class="content" id="login-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
Proin id sapien nec risus congue malesuada vitae ut lorem.<br />
Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
</p>
</div>
</div>
<div class="arrow_down">
</div>
<div class="top-level">
<div class="step-number">
<img src="2.png" alt ="2" height="45px" width="45px" />
</div>
<div class="top-text">Step 2</div>
<div class="content" id="billing-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
Proin id sapien nec risus congue malesuada vitae ut lorem.<br />
Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
</p>
</div>
</div>
<div class="arrow_down">
</div>
<div class="top-level">
<div class="step-number">
<img src="3.png" alt ="3" height="45px" width="45px" />
</div>
<div class="top-text">Step 3</div>
<div class="content" id="shipping-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
Proin id sapien nec risus congue malesuada vitae ut lorem.<br />
Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
</p>
</div>
</div>
<div class="arrow_down">
</div>
<div class="top-level">
<div class="step-number">
<img src="4.png" alt ="4" height="45px" width="45px" />
</div>
<div class="top-text">Step 4</div>
<div class="content" id="paymethod-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
Proin id sapien nec risus congue malesuada vitae ut lorem.<br />
Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
</p>
</div>
</div>
<div class="arrow_down">
</div>
</div>
</body>
</html>