How to slide left float div inside parent div also making the right div width to 100% when left div is hiiden

See more:

CSS3

Hi
i have 2 div inside main div.

with settings as :

<div>---main container
  <div>---display:none for Search panel on page load width:0
  </div>

  <div>----main content holder on page load width:100%
  </div>
</div>

I want to display :as block on button click with the sliding css.
Also changing the main content div width.

Any one please help

What I have tried:

.page{
      margin:0;
      width:100%; 
      height:100vh;  
 }
.page .maincontent{
      float:right;
      width:100%;
      
      
  }
  .page .pagesidebar
 {
    display:none;
    float:left;
    width:25%;
    overflow:hidden;
    height:100%;
 	background-color:#a4a4a4;
     border:1px solid black;
 	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     transition: .6s ease opacity,.6s ease transform;
   }