Question

floated image inside accordion menu jumps after the animation is completed.

The problem seems to be that the accordion() plugin ads a paragraph tag, to every element but the first. all floated images inside the hidden divs jump down after being animated

This is the code that renders on the page but the code on the server has no

tags included they are added after the page renders by the plugin,.

example here http://www.freeenergymedia.com/

<div class="demo" >

<div id="accordion">
<h3><a href="#">First</a></h3>
<div>
<a id="single_image" style="float:left;" href="image1"><img src="thumb1.JPG" /></a></p>
<div style="width: 450px;  margin-left:25px; float:left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

<h3><a href="#">Second</a></h3>
<div>
<p><a id="single_image" style="margin:auto; float:left" href="image2.jpg"><img src="thumb2.jpg"/></a></p>
<div style="width: 450px;  margin-left:25px; float:left"/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

<h3><a href="#">Third</a></h3>
<div>
<p><a id="single_image" style="float:left" href="image3.jpg"><img src="thumb3.JPG" /></a></p>
<div style="width: 450px;  margin-left:20px; float:left;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</div>
<p><!-- End demo --></p>

Answer 1

I encountered this too. I eventually worked out that the accordion javascript seems to be miscalculating the height to use while animating, due to collapsing margins. Try modifying your css for the h3 tags so that either margin-top or margin-bottom is 0.