Question

Having a bit of CSS problem here. First off, my HTML code:

<p>
<span id="tripTitle">Created Trips</span>&nbsp;
<span class="expandicon" style="display:none;"><span class="flip"><img class="expand" src="http://i228.photobucket.com/albums/ee190/micmofo/expand1.png" /></span></span>
<span class="shrinkicon"><span class="flip"><img class="shrink" src="http://i228.photobucket.com/albums/ee190/micmofo/shrink1.png" /></span></span>
</p>

My jQuery code toggles the images.

$(function(){
    $('span.expandicon').click(function(){
        $(this).toggle().next('span.shrinkicon').toggle();    
    });
    $('span.shrinkicon').click(function(){
        $(this).toggle().prev('span.expandicon').toggle();        
    });
})

And lastly, my CSS:

.expand, .shrink { 
    position: absolute;
    right:1px;
}

I want the image to go to the rightmost part of the page but using the current CSS I have, the “shrink” icon stays and so the “expand” icon isn’t seen at all. I’m fairly new with CSS so all I know is by removing the styling, it actually works. So most probably, the problem is with the CSS.

I’ve provided a jsfiddle for those willing to help. http://jsfiddle.net/vfpM5/

Thanks, guys.

Answer 1

Change the CSS to below then work…

.expandicon, .shrinkicon{ 
    position: absolute;
    right:1px;
}

also , I added top:50px; to the css so it would be blocked by the jsfiddle result thing.