JSFiddle - React, Tailwind, and code Playground

by Manjula Dhamodharan

HTML

<div id="wrapper">
     <h1>JQuery Sliding </h1>

    <div id="page">
        <div class="course-list">
             <h2>Course 1</h2>

            <div class="content"> <a href="#" class="slidelink" id="showCoursevideo">Start1</a>

            </div>
        </div>
        <!-- /end # course-list -->
        <div class="course-video">
             <h2>Course video 1</h2>

            <div class="content"> <a href="#" class="leftsidelink" id="showCourselist">Back to the course1</a>

            </div>
        </div>
        <!-- /end #course-video -->
    </div>

CSS

#wrapper {

    width: 880px;

    margin: 0 auto;

    padding-top: 25px;

}

#page {

    display: block;

    position: relative;

    overflow: hidden;

    height: auto;

    background: #fff;

}

.content {

    box-sizing: border-box;

    width: 600px;

    margin: 0 auto;

    padding-bottom: 30px;

    padding: 5px 15px;

    padding-top: 25px;

}

/* inner page layouts */

.course-list {

    display: block;

    position: relative;

    width: 100%;

}

.course-video {

    display: none;

    width: 100%;

    position: absolute;

    top: 0;

    left: 880px;

}

.slidelink {

    font-size: 1.25em;

    font-weight: bold;

    display: inline-block;

    float: right;

}

.leftsidelink {

    font-size: 1.25em;

    font-weight: bold;

    display: inline-block;

}

JavaScript

$(document).ready(function () {
    var clist = $(".course-list");
    var cvideo = $(".course-video");

    /* display the register page */
    $("#showCoursevideo").on("click", function (e) {
        e.preventDefault();
        var newheight = cvideo.height();
        $(cvideo).css("display", "block");

        $(clist).stop().animate({
            "left": "-880px"
        }, 800, function () { /* callback */
        });

        $(cvideo).stop().animate({
            "left": "0px"
        }, 800, function () {
            $(clist).css("display", "none");
        });

        $("#page").stop().animate({
            "height": newheight + "px"
        }, 550, function () { /* callback */
        });
    });

    /* display the login page */
    $("#showCourselist").on("click", function (e) {
        e.preventDefault();
        var newheight = clist.height();
        $(clist).css("display", "block");

        $(clist).stop().animate({
            "left": "0px"
        }, 800, function () { /* callback */
        });
        $(cvideo).stop().animate({
            "left": "880px"
        }, 800, function () {
            $(cvideo).css("display", "none");
        });

        $("#page").stop().animate({
            "height": newheight + "px"
        }, 550, function () { /* callback */
        });
    });
});