Accordion and Shadow

Accordion and Shadow


Hi. Anyone have any suggestions or pointers...? I'm missing something
I think.
It seems that a UI/Shadow placed below a UI/Accordion on a page does
not animate with the accordion animation, which looks kind of ...
wrong.
Here's a sample of what I mean. Could be my code of course. Any help?
<html><head>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>
<script type="text/javascript" src="ui.shadow.js"></script>
<style type="text/css">
.ui-shadow { position:relative; }
.ui-shadow-color { background:#777; position:absolute; }
</style>
<script>
$(document).ready(function(){
$('#accordlist1').accordion({ alwaysOpen: false, navigation: true });
$("#shadow1").shadow();
});
</script></head>
<body>
<ul id="accordlist1" class="ui-accordion-container">
<li><a href='javascript:void(0);' class="ui-accordion-link">Test 1</a>
<div>Lorem ipsum dolor sit amet.</div>
</li>
</ul>
<div style="float:left;padding:1em;">
<div id="shadow1" style="width:2em;height:2em;border:1px solid #777;">
</div>
</div>
</body></html>