Question

I am trying to show/hide a users twitter feed when the icon is clicked on. The issue is that my markup looks like this:

<a href="#"><img src='images/twitter.png' id='twitterImg' /></a>
<span id='twitter_msg'><? include('PHP/twitterJSON.php'); ?></span>

And my jquery uses the slideToggle()

$('#twitterImg').click(function() {
$('#twitter_msg').slideToggle('slow');
});

Which works fine but the <img> and the <span> are displayed inline and floated left. When I click on the img it will toggle the <span> but seems to turn it into a block level element or something and it drops down onto the next line.

What I really want to achieve is to float them right and have the <span> push the <img> left when it appears and then collapse back again when its hidden.

Answer 1

I am going to have to assume that jquery does change it to a block level element before applying the effect to it. I have rectified this by floating the img and the span separately, although I don’t know whether anyone has some other solutions.