Accordion menu not loading correctly
Hi I am trying to put an accordion menu on my site with images. I have 4 images in place and when the page loads they all show up as bullets. Once you mouse over the second or third image then they fall into their accordion position.
Am I missing something in my code?
Here's what I have:
Head Section:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 400;
minWidth = 120;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
Body Section:
<div id="slide">
<ul>
<li>
<a>
<img src="image" />
</a>
</li>
<li>
<a>
<img src="image" />
</a>
</li>
<li>
<a>
<img src="image" />
</a>
</li>
<li>
<a id="a1">
<img src="image" />
</a>
</li>
</ul>
</div>
CSS:
#slide {
width:900px;
}
#slide ul{
list-style: none;
margin: 0;
padding:0;
}
#slide ul li{
float: left;
padding: 10px 3px 10px 10px;
display: block;
margin-right: 10px;
border:2px #fff solid;
}
#slide ul li a{
display: block;
overflow: hidden;
height: 400px;
width: 450px;
}
#a1{
width: 250px;
}
#slide ul li img{
position: absolute;
}
This is my first time using JQuery and I'm trying to make sense of it, but I can't figure out why it's not loading correctly.
Any help would be greatly appreciated.
Thanks.