JSFiddle - React, Tailwind, and code Playground

by David Kagiri

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<div>
			
		<div id="slide_one_div">
			<br>
			<div class="mydiv">
			  <h1>Slide 1 (Left Slide)</h1>
			  <p>...</p>
			  <button id="slide_two_show">Show Slide 2</button>
			</div>
		</div>

		<div id="slide_two_div" style = "display:none">
			<br>
			<div class="mydiv">
			  <h1>Slide 2 (Right Slide)</h1>
			  <p>...</p>
			  <button id="slide_one_show">Show Slide 1</button>
			</div>
		</div>			
		
	</div>

CSS

.mydiv {
			background: green;
			width: 100%;
			height: 150px;
			outline: 1px solid #f93;
		}

JavaScript

jQuery.fn.extend({

  slideRightShow: function() {
    return this.each(function() {
      $(this).show('slide', {
        direction: 'right'
      }, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {
        direction: 'left'
      }, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {
        direction: 'right'
      }, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {
        direction: 'left'
      }, 1000);
    });
  }

});


$("#slide_two_show").click(function() {

  $("#slide_one_div").slideLeftHide();
  $("#slide_two_div").slideRightShow();

});

$("#slide_one_show").click(function() {

$("#slide_one_div").slideLeftShow();
$("#slide_two_div").slideRightHide();

});