Jquery Accordian, hiding images when the page loads
Hi, first off, warning I'm a total Jquery noob, this is my first use of jquery on a site.
I got the code for a horizontal accordion from this site:
http://designreviver.com/tutorials/jque ... mment-5741
Here is the site I'm using it on:
http://www.cbtemecula.com/people.php
Got it most of the way working, but still having a couple issues that I can't puzzle out.
1. In firefox, when I load the page, not everything in the accordion loads. Sometimes I have to refresh the page several times for everything to show up. IE doesn't seem to have this problem.
2. On both browsers, when I load the page, all of the elements are showing, and only become hidden when you hover over them. The site I got the code from says to use id="a1" on the element that you want unhidden when the page loads, and the rest will be hidden, but it doesn't seem to work. All of the elements are showing instead of just the first one, and even removing it doesn't change anything.
Heres the code:
In the <head>:
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 252;
minWidth = 50;
$("ul.accordian 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>
The HTML:
<div class="resumeAccordian">
<ul class="accordian">
<li>
<a href="index.php" title="Allen Nunez - Click to view resume" id="a1">
<img src="images/Allen1_thumb.jpg" alt="Allen Nunez" />
<div class="Allen">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Michaelle1_thumb.jpg" alt="Michaelle Kelly" />
<div class="Michaelle">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Kevin1_thumb.jpg" alt="Kevin Nellis" />
<div class="Kevin">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Lindsey1_thumb.jpg" alt="Lindsey Sands" />
<div class="Lindsey">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Carey1_thumb.jpg" alt="Carey Pastor" />
<div class="Carey">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Georgia1_thumb.jpg" alt="Georgia Dettelbach" />
<div class="Georgia">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Stan1_thumb.jpg" alt="Stan Nowak" />
<div class="Stan">
</div>
</a>
</li>
<li>
<a href="index.php" title="Allen Nunez - Click to view resume">
<img src="images/Amy1_thumb.jpg" alt="Amy Wells" />
<div class="Amy">
</div>
</a>
</li>
</ul>
</div>
The CSS:
.resumeAccordian {margin:40px 0 40px 130px;}
ul.accordian {list-style:none; margin:0; padding:0;}
ul.accordian li {float:left; padding:0; display:block; margin:0 auto;}
ul.accordian li a {display:block; overflow:hidden; height:305px; width:250px; float:left; color:#fff; text-decoration:none;}
#a1 {width:250px;}
ul.accordian li img{position:absolute; border:2px solid #000;}
ul.accordian li div {margin:0 auto; padding:0; width:250px; height:305px; display:block; margin-left:50px;}
ul.accordian li div p {float:left;}
li.accordian1 {background:#000;}
ul.accordian a strong {font-size:16px; color:#fff; text-decoration:none;}
.Allen {display:block; background:url(images/Allen1.jpg) left no-repeat; width:210px; height:300px;}
.Michaelle {display:block; background:url(images/Michaelle1.jpg) left no-repeat; width:210px; height:300px;}
.Kevin {display:block; background:url(images/Kevin1.jpg) left no-repeat; width:210px; height:300px;}
.Lindsey {display:block; background:url(images/Lindsey1.jpg) left no-repeat; width:210px; height:300px;}
.Carey {display:block; background:url(images/Carey1.jpg) left no-repeat; width:210px; height:300px;}
.Georgia {display:block; background:url(images/Georgia1.jpg) left no-repeat; width:210px; height:300px;}
.Stan {display:block; background:url(images/Stan1.jpg) left no-repeat; width:210px; height:300px;}
.Amy {display:block; background:url(images/Amy1.jpg) left no-repeat; width:210px; height:300px;}
Can anyone tell what I'm doing wrong?
Any help would be much appreciated, thank you!
-Hiram