Take the 2-minute tour ×

I have a toggle-container, which hides its content by default. When clicking to the container the content is slide in using .toggle from jQuery.

The content consists of three divs next to each other with the display:inline-block attribute so that they are shown in a row. The problem I have is that when toggling the content, the divs are shown under each other. They appear in a row when the animation has finished (nearly finished). They make a jump to their final position. Is it possible to show them in a row from the beginning on?

Best regards

Edit: Here is the Jsfiddle link: http://jsfiddle.net/7Ly5b/

<div class="contentline">
<div class ="bege">
    <div class="parent">
    <div class="toggle">
        <div class="content">Höchster Sieg:</div>
        <div class="clear"></div>


I tried it with float instead of display:inline-block now, but with no success. It seems like there is a problem with the width. Because when I delete the div with the class container then it works. But I can't remove it.

share|improve this question
Fancy showing us your code? –  Tom Walters Dec 21 '12 at 12:48

1 Answer 1

Maybe it's better to provide example of your html and css content. Use http://jsfiddle.net/

Probably jQuery tells them to display block when unhiding. I would recommend using float instead of display-inline:block; but then you might need to clear it because in some cases it may influence your layout in a bad way.

If I see it I can give you more appropriate advice

share|improve this answer

Your Answer


