CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Suika
Suika

Reputation: 660

Slide two pages to left and right using CSS or JS/JQuery

I have two "About" pages and would like to scroll left and right to each other when a link is clicked. This is my mark up.

<div id="about">
    <div id="about-1">
        <p>Content for about 1</p>
        <a href="#about-2">Slide to #about-2</a>
    </div>
    <div id="about-2">
        <p>Content for about 2</p>
        <a href="#about-1">Slide back to #about-1</a>
    </div>
</div>

I also made a visual representation on how I want it to be:

enter image description here

I am new to this and was hoping I'd get a simple CSS solution as much as possible because I don't know JS/Jquery but if it's the simpler way, so be it. I would also like it to be responsive if that's not too much to ask. :) Help, anyone? Thanks!

Upvotes: 2

Views: 3664

Answers (1)

YaBCK
YaBCK

Reputation: 3029

Have you thought about using JQuery UI?

Here is an example for you to have look at:

function transitionPage() {
    // Hide to left / show from left
    $("#about-1").toggle("slide", {direction: "left"}, 500);

    // Show from right / hide to right
    $("#about-2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
    $('#about-1').click(transitionPage);
    $('#about-2').click(transitionPage);
});

FIDDLE EXAMPLE

Upvotes: 3

Related Questions