html - When I move checkbox position to navbar, then hide and show sidebar is not working -

in demo used checkbox hide , show sidebar respectively move content left side question when change checkbox current position navbar doesn't work. please me. jsfiddle

index.html

<div id="wrapper">     <div id="header">         <h2>my header</h2>     </div>      <div id="navbar">         <h2>my navbar</h2>     </div>      <div class="content-wrapper">         <input id="slide-sidebar" type="checkbox" role="button" />         <label for="slide-sidebar"><span>close</span></label>          <div class="sidebar-left">             <h2>lecture dates</h2>             <p>11/07 - lecture on caesar</p>             <p>11/08 - lecture on caesar</p>             <p>11/09 - lecture on caesar</p>             <p>11/10 - lecture on caesar</p>             <p>11/11 - lecture on caesar</p>             <p>11/07 - lecture on caesar</p>             <p>11/08 - lecture on caesar</p>             <p>11/09 - lecture on caesar</p>             <p>11/10 - lecture on caesar</p>             <p>11/11 - lecture on caesar</p>             <p>11/07 - lecture on caesar</p>         </div>           <div class="portfolio">              <h1>hello world</h1>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <h2>hello world</h2>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque viverra mauris nec sem condimentum pellentesque. praesent tincidunt non nulla in ullamcorper. nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. maecenas pellentesque porta cursus. in ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>         </div>     </div>     <div id="footer">         <h3>my footer</h3>     </div> </div> 

styles.css

[body {     background-color: #9c9f84;     margin: 0px;     font-family: georgia;     font-size: 14px; } #header {     background-color: #5c755e;     left: 0px;     right: 0px;     top: 0px;     position: fixed;     z-index: 100; } #header h2 {     text-align: center;     padding: 10px; } #footer {     background-color: #5c755e;     margin: 10px;     bottom: 0px;     left: 0px;     right: 0px;     font-size: 110%;     border-radius: 5px;     position: relative; } #footer h3 {     text-align: center;     padding: 10px; } #navbar {     background-color: #5c755e;     margin-left: 10px;     margin-right: 10px;     margin-bottom: 10px;     border-radius: 5px;     margin-top: 90px; } #navbar h2 {     text-align: center;     padding: 10px; } #slide-sidebar + label:after {     content: '';     clear: both;     display: block; } #wrapper {     height: 100%;     width: 100%;     position: absolute; } .portfolio {     background-color: #e5e4d7;     margin-left: 0px;     margin-bottom: 10px;     margin-right: 10px;     padding: 20px;     font-size: 110%;     border-radius: 5px;     -moz-transition: left 1s ease;     transition: left 1s ease;     position: relative;     overflow: hidden;     width: auto; } .sidebar-left {     display: block;     box-sizing: border-box;     background-color: #e5e4d7;     margin-top: 0px;     margin-left: 10px;     margin-bottom: 10px;     margin-right: 10px;     border-radius: 5px;     padding: 20px;     font-size: 105%;     width: 260px;     clear: both;     position: relative;     -moz-transition: margin-left 1s ease;     transition: margin-left 1s ease;     float: left;     overflow: hidden;     white-space: nowrap;     -moz-transition: width 0.5s ease, padding 0.5s ease;     transition: width 0.5s ease, padding 0.5s ease; } input:checked ~ .sidebar-left {     padding-left: 0px;     padding-right: 0px;     margin-right: 0px;     width: 0px;     -moz-transition: width 0.5s ease, padding 0.5s ease;     transition: width 0.5s ease, padding 0.5s ease; }][1] 

as @sumit wrote:

it isn't working because have written input:checked ~ .portfolio. css can not select in upward direction, need jquery or js this.

you can use following jquery code:

$("#slide-sidebar").change(function() {   $(".sidebar-left").toggleclass("show"); }); 

and css code:

.sidebar-left.show {   padding-left: 0px;   padding-right: 0px;   margin-right: 0px;   width: 0px;   -moz-transition: width 0.5s ease, padding 0.5s ease;   transition: width 0.5s ease, padding 0.5s ease; } 

updated jsfiddle.