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 */ });
  });
});