Sliding a div from right to left via jQuery or CSS3

Question

I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.

The transition should work in IE10+, anything below it's fine if it doesnt have a transition

http://jsfiddle.net/AV22p/

Below is the structure of my HTML

<section id="modalwindow">
    <div id="foodlist">
        <div class="links">
            <h1>Div 1</h1>
                <ul>
                    <a href="#"><li>Example1    </li></a>
                    <li><a href="#">Example2</a></li>
                    <li><a href="#">Example3</a></li>
                    <li><a href="#">Example4</a></li>
                    <li><a href="#">Example5</a></li>
                    <li><a href="#">Example6</a></li>
                    <li><a href="#">Example7</a></li>
                    <li><a href="#">Example8</a></li>
                </ul>

        </div>
    </div>
</section>

<section id="modalwindow">
    <div id="food_details">
        <div class="details">
            <h1>Recipe</h1>
            <ul>
                <li>test </li>
                <li>test</li>
                <li>test</li>
           </ul>

        </div>
    </div>
</section>

Have you tried http://stackoverflow.com/questions/2411314/jquery-slide-left-and-slide-right?rq=1? — hitautodestruct, May 19 '14 at 13:28
I don't see any CSS or JavaScript attempts in your code to perform a slide. — j08691, May 19 '14 at 13:33
id's must be unique within a web page and you're using modalwindow twice. You have some other problems in your markup. Other than that, have you tried any code? — Jay Blanchard, May 19 '14 at 13:40

timo · Accepted Answer · 2014-05-23T10:41:41.727

Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.

divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.

$('.links ul li a').click(function(){
    var divWidth = '-'+$('#modalwindow').width();
    $('#food_details').parent().animate({left: divWidth});
});

http://jsfiddle.net/AV22p/3/

Also note that your first example link has a different/invalid markup than the rest.

Sliding a div from right to left via jQuery or CSS3

1 Answers1