how div show smoothly left to right using only CSS? - html

Question

I tried all questions & answers related this topic. Additionally and I tried related questions and try to solve it but not success. So please read my question thoroughly.
I want to
click right side -> arrow then Viewer Dox div should show and hide, very smoothly.
if div opens, it should move right to left and div hide then move left to right using CSS only.
Fiddle Code
Code Snippet
/* Body Css */
body {
margin: 0;
width:100%;
height: 100%;
background: #fff repeat scroll 0% 0%;
position: relative;
font-family: Roboto,Arial, Helvetica, sans-serif sans-serif;
}
/* Main Home Wrapper*/
.MainHomeWrapper{
width:100%;
height: 100%;
max-width: 100%;
display: inline-block;
position: relative;
}
/***************************************** Header Start ********************************/
/* Header & Main Content*/
.clsHeader,.clsContent {
width: 100%;
min-height: 40px;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
float: left;
position: relative;
/*border: 1px dotted black;*/
}
/* inside a all div in Header assign inline*/
.clsHeader > div ,.clsContent > div{
float: left;
border: 1px solid black;
box-sizing: border-box;
min-height: 81px;
}
.clsHeader > div {
min-height: 75px;
}
.clsContent > div{
min-height: 725px;
}
/* Header Logo Wrapper*/
.clsHedLogo{
width: 10%;
}
/* Header Middle Wrapper or Content*/
.clsHedMidContent{
width: 70%;
}
/* Header Logout Wrapper*/
.clsHedLogout{
width: 20%;
}
/***************************************** Header End ********************************/
/***************************************** Content Start ********************************/
/********** Fix Left Menu Start ***********/
/* Main left Content */
.clsFixLeftCont{
width: 6%;
background-color: #f5821f;
box-sizing: border-box;
}
.clsFixLeftCont > ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.clsFixLeftCont ul li{
box-sizing: border-box;
}
.clsFixLeftMenublock{
padding: 15px;
text-align: center;
font-size: 30px;
height: 30px;
cursor: pointer;
color: #FFF;
}
.clsFixLeftMenublock > .fa {
padding-top: 7px;
}
/********** Fix Left Menu End ***********/
/********** Middle Content Start ***********/
/* Main Middle Content */
.clsMidcont{
width: 48%;
box-sizing: border-box;
}
.clsMidcont > div {
box-sizing: border-box;
}
.clsSearchWrapper{
width: 100%;
min-height: 50px;
padding: 5px;
border-bottom: 1px solid black;
}
.clsBreadCrumbsWrapper{
width: 100%;
min-height: 50px;
padding: 5px;
border-bottom: 1px solid black;
}
.clsListingWrapper{
width: 100%;
min-height: 623px;
padding-top: 10px;
border-bottom: 1px solid black;
}
/********** Middle Content End ***********/
/********** Right Content Start ***********/
/* Main right Content */
.clsrightcont{
width:44%;
}
/********** Right Content End ***********/
/********** Fix Right Menu Start ***********/
.clsFixRightcont{
width: 10%;
background-color: #f5821f;
box-sizing: border-box;
position: absolute;
right: 0;
}
.clsFixRightcont > ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.clsFixRightcont ul li{
box-sizing: border-box;
}
.clsFixRightMenublock{
padding: 2px;
text-align: center;
font-size: 17px;
height: 50px;
cursor: pointer;
color: #FFF;
}
.clsFixRightMenublock > .fa {
padding-top: 7px;
}
/********** Fix Right Menu End ***********/
/***************************************** Content End ********************************/
input:checked ~ .clsrightcont { display: none; }
input:checked ~ .clsMidcont {
width:92%;
}
label {
/*background-color: yellow;*/
box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
border-radius: 4px;
font-size: 16px;
display: inline-block;
padding: 2px 5px;
cursor: pointer;
float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="MainHomeWrapper">
<div class="clsHeader">
<div class="clsHedLogo padding-5">
logo
</div>
<div class="clsHedMidContent padding-5">
midd
</div>
<div class="clsHedLogout padding-5">
logout
</div>
</div>
<div class="clsContent">
<input type='checkbox' class="ss" style='display: none' id=cb>
<div class="clsFixLeftCont">
</div>
<div class="clsMidcont">
<div class="clsSearchWrapper text-center">
<span>Search Box</span>
</div>
<div class="clsBreadCrumbsWrapper text-center">
<span> Bread Crumbs Box</span>
</div>
<div class="clsListingWrapper text-center">
<span > Listing Box</span>
</div>
</div>
<div class="clsrightcont">
<h3 class="text-center"> Viewer Dox</h3>
</div>
<div class="clsFixRightcont">
<!--Click Here-->
<ul>
<li>
<div class="clsFixRightMenublock">
<!--<i class="fa fa-arrow-left" aria-hidden="true"></i>-->
<label for=cb><i class="fa fa-arrow-right" aria-hidden="true"></i></label>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<label for=cb> <i class="fa fa-home" aria-hidden="true"></i></label>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-bank" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-bank" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-tasks" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
</div>

Answer 1

Is this behavior you are looking for?
/* Body Css */
body {
margin: 0;
width:100%;
height: 100%;
background: #fff repeat scroll 0% 0%;
position: relative;
font-family: Roboto,Arial, Helvetica, sans-serif sans-serif;
}
/* Main Home Wrapper*/
.MainHomeWrapper{
width:100%;
height: 100%;
max-width: 100%;
display: inline-block;
position: relative;
}
/***************************************** Header Start ********************************/
/* Header & Main Content*/
.clsContent {
overflow: hidden;
}
.clsHeader,.clsContent {
width: 100%;
min-height: 40px;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
float: left;
position: relative;
/*border: 1px dotted black;*/
}
/* inside a all div in Header assign inline*/
.clsHeader > div ,.clsContent > div{
float: left;
border: 1px solid black;
box-sizing: border-box;
min-height: 81px;
}
.clsHeader > div {
min-height: 75px;
}
.clsContent > div{
min-height: 725px;
}
/* Header Logo Wrapper*/
.clsHedLogo{
width: 10%;
}
/* Header Middle Wrapper or Content*/
.clsHedMidContent{
width: 70%;
}
/* Header Logout Wrapper*/
.clsHedLogout{
width: 20%;
}
/***************************************** Header End ********************************/
/***************************************** Content Start ********************************/
/********** Fix Left Menu Start ***********/
/* Main left Content */
.clsFixLeftCont{
width: 6%;
background-color: #f5821f;
box-sizing: border-box;
}
.clsFixLeftCont > ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.clsFixLeftCont ul li{
box-sizing: border-box;
}
.clsFixLeftMenublock{
padding: 15px;
text-align: center;
font-size: 30px;
height: 30px;
cursor: pointer;
color: #FFF;
}
.clsFixLeftMenublock > .fa {
padding-top: 7px;
}
/********** Fix Left Menu End ***********/
/********** Middle Content Start ***********/
/* Main Middle Content */
.clsMidcont{
width: 48%;
box-sizing: border-box;
transition: width .6s;
}
.clsMidcont > div {
box-sizing: border-box;
}
.clsSearchWrapper{
width: 100%;
min-height: 50px;
padding: 5px;
border-bottom: 1px solid black;
}
.clsBreadCrumbsWrapper{
width: 100%;
min-height: 50px;
padding: 5px;
border-bottom: 1px solid black;
}
.clsListingWrapper{
width: 100%;
min-height: 623px;
padding-top: 10px;
border-bottom: 1px solid black;
}
/********** Middle Content End ***********/
/********** Right Content Start ***********/
/* Main right Content */
.clsrightcont{
width:44%;
transition: width .6s;
}
/********** Right Content End ***********/
/********** Fix Right Menu Start ***********/
.clsFixRightcont{
width: 10%;
background-color: #f5821f;
box-sizing: border-box;
position: absolute;
right: 0;
}
.clsFixRightcont > ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.clsFixRightcont ul li{
box-sizing: border-box;
}
.clsFixRightMenublock{
padding: 2px;
text-align: center;
font-size: 17px;
height: 50px;
cursor: pointer;
color: #FFF;
}
.clsFixRightMenublock > .fa {
padding-top: 7px;
}
/********** Fix Right Menu End ***********/
/***************************************** Content End ********************************/
input:checked ~ .clsrightcont { width: 0% }
input:checked ~ .clsMidcont {
width:92%;
}
label {
/*background-color: yellow;*/
box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
border-radius: 4px;
font-size: 16px;
display: inline-block;
padding: 2px 5px;
cursor: pointer;
float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="MainHomeWrapper">
<div class="clsHeader">
<div class="clsHedLogo padding-5">
logo
</div>
<div class="clsHedMidContent padding-5">
midd
</div>
<div class="clsHedLogout padding-5">
logout
</div>
</div>
<div class="clsContent">
<input type='checkbox' class="ss" style='display: none' id=cb>
<div class="clsFixLeftCont">
</div>
<div class="clsMidcont">
<div class="clsSearchWrapper text-center">
<span>Search Box</span>
</div>
<div class="clsBreadCrumbsWrapper text-center">
<span> Bread Crumbs Box</span>
</div>
<div class="clsListingWrapper text-center">
<span > Listing Box</span>
</div>
</div>
<div class="clsrightcont">
<h3 class="text-center"> Viewer Dox</h3>
</div>
<div class="clsFixRightcont">
<!--Click Here-->
<ul>
<li>
<div class="clsFixRightMenublock">
<!--<i class="fa fa-arrow-left" aria-hidden="true"></i>-->
<label for=cb><i class="fa fa-arrow-right" aria-hidden="true"></i></label>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<label for=cb> <i class="fa fa-home" aria-hidden="true"></i></label>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-bank" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-bank" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="clsFixRightMenublock">
<i class="fa fa-tasks" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
</div>