Accordion headers not sliding inside a slidetoggled div
I have an accordion inside a div that is slidetoggled. When I expand the slidetoggled div the accordion headers pop up instantly and are not animated with the slide. Similarly, when I collapse the slidetoggled div the accordion headers stay on screen until the slide is complete and then they disappear. This is being used on IE7 if that makes a difference. Is there a way to prevent this?
<h2 id='slideclick'>Click</h2>
<div id='slidediv'>
<div id='accordion'>
<h3>section 1<h3>
<div>test</div>
<h3>section 2<h3>
<div>test</div>
<h3>section 3<h3>
<div>test</div>
</div>
</div>
<script>
$("#slideclick").click(function () {
$("#slidediv").slideToggle("slow");
});
$( "#accordion" ).accordion();
</script>