I’m trying to build a horizontal accordion with Jquery. It seems to be working “ok” in Firefox. But in Webkit (Safari 3 + 4, and Chrome) the sub-level UL flashes after the Hide function. Any help would be greatly appreciated. To see a working demo: http://ableobject.com/horaccordion1.html
Here is what I’m working on:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>untitled</title>
<style type="text/css">
#container {
display: table;
margin: 0 auto;
text-align: center; /* for IE */
}
ul{
list-style: none;
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 20px; /* For testing */
}
ul li {
background-color: aqua;
float: left;
}
ul li ul {
background-color: blue;
display: none;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
float: left;
}
</style>
<script type="text/javascript">
/* Care of Hunter Daley */
var $current = null;
$(document).ready(function(){
$("ul li ul").hide(); // hide submenus by default on load
$("ul li a").click(function(){
var $sub = $(this).next();
if ($sub.css("display") == "none")
{
if ($current != null)
$current.animate({ width: 'hide' }); // if you want to only show one sub at a time
$sub.animate({ width: 'show' });
$current = $sub;
}
else
{
$sub.animate({ width: 'hide' });
$current = null;
}
});
});
</script>
</head>
<body>
<div id="container">
<ul>
<li>
<a href="#">Top-level 1</a>
</li>
<li>
<a href="#">Top-level 2</a>
<ul>
<li><a href="#">Bottom Level A1</a></li>
<li><a href="#">Bottom Level A2</a></li>
<li><a href="#">Bottom Level A3</a></li>
<li><a href="#">Bottom Level A4</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 3</a>
<ul>
<li><a href="#">Bottom Level B1</a></li>
<li><a href="#">Bottom Level B2</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 4</a>
</li>
</ul>
</div>
</body>
This sounds like it is related to an issue I had a little while ago with webkit. There is a webkit bug that sometimes causes an element’s parent to revert to its original size after an animation that reduces the elements’ width. After the animation, the element’s parent jumps back to its original size in order to accommodate its content.
Edit: Removed comments about jQueryUI. Not sure why I thought you were using it.
The bug was discussed here, which details a workaround.
I submitted a bug report to jQuery as well.
Basically, you would need to simultaneously reduce the width of your
$subelement’s parent by the same amount as$subis being reduced. So if the width of$subis 100px, there would be a separateanimate()to reduce the parent by 100px.I haven’t tested any of this with your example, but I think it is probably the key.
Edit 2:
A new version using divs
CSS:
}
javascript:
HTML: