accordéon horizontal ne fonctionne pas dans Safari ou Chrome

Question

Je suis sûr que je manque quelque chose d'évident ici, car je suis relativement nouveau à jQuery.J'essaie de construire un accordéon horizontal. Jusqu'à présent, cela fonctionne bien dans FF mais pas dans Safari ou Chrome.

Dans Safari et Chrome, les divs .content apparaissent sous leurs volets d'accordéon respectifs plutôt que de conserver leur position et d'afficher l'animation de largeur.

Merci d'avance pour toute aide.

Voici un lien vers l'exemple: http://www.billjordandesign.com/jQuery_tests/horizontal_accordion.html

Voici mon jQuery:

<script type="text/javascript"> 
$(document).ready(function() { 

$('.content').hide(); 
$('.content:first').show(); 


$('a').click(function(){ 

$('.content').hide(); 
$(this).siblings('.content').animate({'width':'toggle'}, 'slow', 'easeOutBack') 
    }); 

}); 

</script> 

... voici mon code HTML:

<div id="navigation"> 

<ul> 

<li><a href="#"><span><div class="pane"><div class="verticaltext">Home</div></div></span></a><div class="content">1</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">About</div></div></span></a><div class="content">2</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Overview</div></div></span></a><div class="content">3</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Services</div></div></span></a><div class="content">4</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Contact</div></div></span></a><div class="content">5</div></li> 

</ul> 

</div> 

... voici mon CSS:

#navigation{ 
position:absolute; 
display:block; 
top:100px; 
width:1000px; 
height:400px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:#333; 

} 

#navigation a{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
font-weight:bold; 
color:#FFF; 

} 

#navigation a:hover{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
font-weight:bold; 
color:#FFF; 


} 


#navigation ul{ 
margin:0; 
padding:0; 
height:400px; 
list-style-type:none; 
list-style-image:none; 
} 

#navigation li{ 
display:inline; 
border-right:thin #FFF solid; 
float:left; 

} 

.pane{ 
position:relative; 
display:block; 
height:400px; 
width:50px; 
background-color:#09F; 
float:left; 
} 

.verticaltext { 
position:absolute; 
display:block; 
width:50px; 
bottom:50px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:24px; 
font-weight:bold; 
color:#FFF; 
text-align:center; 
letter-spacing:-1px; 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
} 

.content{ 
position:relative; 
display:block; 
width:400px; 
height:400px; 
left:10px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
color:#333; 
float:left; 
background-color:#FFF 
} 

Answer 1

la jquery a l'air solide, j'ai fait quelques tweaks html et css. Il travaille pour moi en chrome

http://jsfiddle.net/generalhenry/D3Hm5/1/