jQuery’s slideToggle() method is great for creating things like accordions. Unfortunately it seems I am not alone when I say it’s buggy. The sliding animation can flicker and/or appear to jump, depending on the browser and version of jQuery.
After much trial and error, I realized that this problem can be solved by applying an explicit width (with CSS) on the element being animated. The below code is tested and working in IE6, IE7, and FF3. With jQuery 1.2.1, 1.2.3, and 1.3.1.
I hope this saves someone else a few hours.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<style type="text/css">
/* Expanders */
.expander-group {
width: 440px;
}
.expander .expander-title {
cursor: pointer;
font-size: 20px;
padding: 5px 0 5px 10px;
}
.expander {
border-bottom: 1px solid #75736F;
}
.expander-content {
width: 440px;
display: none;
}
.expander-inner {
padding: 6px 0 6px 15px;
}
/* */
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(’.expander > .expander-title’).click(function(e) {
var content = $(this).siblings(’.expander-content’);
content.slideToggle("normal");
});
});
</script>
</head>
<body>
<div class="expander-group">
<div class="expander">
<div class="expander-title">A title here</div>
<div class="expander-content"><div class="expander-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat elit sed pede. Donec ut elit. Curabitur massa sem, auctor non, malesuada nec, pretium a, diam. Proin libero. Vestibulum condimentum mauris id leo. Vivamus in mauris eget ante molestie tincidunt. Suspendisse risus. Vivamus mattis sagittis diam.</div></div>
</div>
<div class="expander">
<div class="expander-title">Some title here again</div>
<div class="expander-content"><div class="expander-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat elit sed pede. Donec ut elit. Curabitur massa sem, auctor non, malesuada nec, pretium a, diam. Proin libero. Vestibulum condimentum mauris id leo. Vivamus in mauris eget ante molestie tincidunt. Suspendisse risus. Vivamus mattis sagittis diam.</div></div>
</div>
</div>
</body>
</html>
