Jquery UI Slide two div alongside

Question

Im new in jqueryUI, i want to show and hide some div with slide effect, im trying to create some code but the results are not as expected, how to make it happen?

my expected result like this:

if button next or back clicked, .page1 alongside .page2

Ps: Sorry for my bad English

My Code:

function showpage(page){
	if(page=="page1"){
		$(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
			$(this).removeClass('active');
			$('.page2').show("slide", { direction: "right" }, 1000).addClass('active');
		});
	}else{
		$(".page2.active").hide("slide", { direction: "right" }, 1000, function(){
			$(this).removeClass('active');
			$('.page1').show("slide", { direction: "left" }, 1000).addClass('active');
		});
	}
 }

.page1, .page2{
	display:none;
  }
  .container{
	border: 5px solid #000;
  }
  .container{
	width: 310px;
	height: 310px;
  }
  .page1, .page2{
	width: 300px;
	height: 300px;
	color: #000;
  }
  .container .page1{
	background: yellow;
	padding:5px;
  }
  .container .page2{
	background: green;
	padding:5px;
  }
  
  .active{
	display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">

	<div id="page1" class="page1 active">
		Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
	</div>
	<div id="page2" class="page2">
		Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. 
	</div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');"/>
<input type="button" value="Next" onClick="showpage('page2');"/>

Answer 1

Add position:absolute; to botth .page1 and .page2 also for the annimation

just trigger them at same time , not in callback function ,

See below Snippet :

function showpage(page) {
  if (page == "page1") {
    $(".page1.active").hide("slide", {
      direction: "left"
    }, 1000, function() {
      $(this).removeClass('active');

    });
    $('.page2').show("slide", {
      direction: "right"
    }, 1000).addClass('active');
  } else {
    $(".page2.active").hide("slide", {
      direction: "right"
    }, 1000, function() {
      $(this).removeClass('active');

    });
    $('.page1').show("slide", {
      direction: "left"
    }, 1000).addClass('active');
  }
}

.page1,
.page2 {
  display: none;
  position:absolute;
}



.container {
  border: 5px solid #000;
}

.container {
  width: 310px;
  height: 310px;
}

.page1,
.page2 {
  width: 300px;
  height: 300px;
  color: #000;
}

.container .page1 {
  background: yellow;
  padding: 5px;
}

.container .page2 {
  background: green;
  padding: 5px;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">

  <div id="page1" class="page1 active">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
    aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
    at lectus.
  </div>
  <div id="page2" class="page2">
    Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam.
    Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio.
  </div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');" />
<input type="button" value="Next" onClick="showpage('page2');" />

Answer 2

This can be done by moving you're show functions outside of the hide functions callbacks, for example:

if(page=="page1"){
        $(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
            $(this).removeClass('active');
});
$('.page2').show("slide", { direction: "right" }, 1000).addClass('active');

Then add position: relative to the container and the the child elements positioning to absolute.

Here's a working example:

function showpage(page){

  if(page=="page1"){
  
    $(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
      $(this).removeClass('active');
    });
    $('.page2').show("slide", { direction: "right" }, 1000).addClass('active');
    
  }else{
  
    $(".page2.active").hide("slide", { direction: "right" }, 1000, function(){
      $(this).removeClass('active');
    });
    $('.page1').show("slide", { direction: "left" }, 1000).addClass('active');
    
  }
  
 }

.page1, .page2{
	display:none;
  }
  .container{
	border: 5px solid #000;
  position: relative;
  }
  .container{
	width: 310px;
	height: 310px;
  }
  .page1, .page2{
  position: absolute;
  top: 0;
	width: 300px;
	height: 300px;
	color: #000;
  }
  .container .page1{
	background: yellow;
	padding:5px;
  }
  .container .page2{
	background: green;
	padding:5px;
  }
  
  .active{
	display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">

	<div id="page1" class="page1 active">
		Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
	</div>
	<div id="page2" class="page2">
		Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. 
	</div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');"/>
<input type="button" value="Next" onClick="showpage('page2');"/>