javascript - How to use jQuery and CSS to write vertical drawer -

i working on drawer component in ember.js. here jsbin http://jsbin.com/wulija/8/edit

what want in beginning looks this

+---------------------------+ |         b        c      | +---------------------------+   ... other page content ... 

if click on option, corresponding component show up. drawer slide down reveal content a, , overlap following page content

+---------------------------+ |    _a_    b        c      | +---------------------------+ |                           |  |  click a, slide down reveal content |    content              |  v  following page content covered drawer +---------------------------+ 

then if click on b, content slide toward left, content b slide in right, drawer height adjust according content b.

+---------------------------+ |       _b_        c      | +---------------------------+ |                           |  |  if content b has more content |                           |  |  slide down further |nt <--     <-- content b |  v   |                           | +---------------------------+ 

if click on current selected option, drawer close

+---------------------------+ |       _b_        c      | +---------------------------+   ^                                 |  close drawer 

i have few problems

• i want drawer slide down as content size. if want have slide left/right effect, set content position: absolute; , move using jquery adding transform: translate. this, drawer won't extend @ all, because content-x don't occupy space. position: absolute; elements can't hide overflow-y: hidden;

• each content-x has different size , it's ajax request data, size unknown. therefore can't have fixed length drawer, rather let browser layout engine allocate space need. doing so, need content-x position: static;, have 3 contents stacking vertically.

there lot of things have do. make here 1st option.

$(document).ready(function () {    var show1 = false,        show2 = false,        show3 = false,                content1 = $('.btn-1'),        content2 = $('.btn-2'),        content3 = $('.btn-3');        $('.content-placeholder').css("width", $(window).width());        var w = $(window).width() + 30;        $(window).resize(function () {      w = $(window).width() + 30;    });        function checkdrawer (shouldopen) {      if (shouldopen) {        $('.drawer-content').addclass('show');      } else {        $('.drawer-content').removeclass('show');      }    }        $('.btn-1').on('click', function () {      show1 = !show1;      show2 = false;      show3 = false;      checkdrawer(show1 || show2 || show3);      if($('.btn-1').hasclass( "current" ))        {          $('.main_content').slideup(1000);          content1.removeclass('current');        }      else        {          $('.main_content').slidedown(1000);          content1.addclass('current');        }      $('.drawer-content').css('transform', 'translate(0, 0)');                  content2.removeclass('current');      content3.removeclass('current');    });        $('.btn-2').on('click', function () {      show1 = false;      show2 = !show2;      show3 = false;      checkdrawer(show1 || show2 || show3);                        $('.drawer-content').css('transform', 'translate(-' + w + 'px, 0)');                  content1.removeclass('current');            content3.removeclass('current');          });        $('.btn-3').on('click', function () {      show1 = false;      show2 = false;      show3 = !show3;      checkdrawer(show1 || show2 || show3);         $('.drawer-content').css('transform', 'translate(-' + 2 * w + 'px, 0)');              content1.removeclass('current');      content2.removeclass('current');      content3.addclass('current');    });  });

.main_content{    position:relative;    z-index:1;    display:none;  }    .drawer {      border: 1px solid green;      height: 100px;      position: fixed;      width: 100%;  }  .drawer-navbar {      width: 100%;  }  .drawer-content {      overflow-x: hidden;      transition: 0.3s ease 0s;      width: 5000px;    position:relative;  }  .drawer-content.show {      max-height: 700px;  }  .content-placeholder {      border: 1px solid yellow;      float: left;      top: 90px;        }  .content-placeholder > div {      transition: 0.5s ease 0s;  }  .content-placeholder.current {      border: 5px solid yellow;  }  .content-1 {      background-color: red;      height: 300px;  }  .content-2 {      background-color: green;      height: 200px;  }  .content-3 {      background-color: blue;      height: 100px;  }  .other-content {      position: relative;      top: 100px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body>      <div class="drawer">      <div class="drawer-navbar">        <ul>          <li class="btn-1">1</li>          <li class="btn-2">2</li>          <li class="btn-3">3</li>        </ul>      </div>            <div class="main_content">      <div class="drawer-content">        <div class="content-placeholder">          <div class="content-1"></div>        </div>        <div class="content-placeholder">          <div class="content-2"></div>        </div>        <div class="content-placeholder">          <div class="content-3"></div>        </div>            </div>      </div>    </div>    <div class="other-content">      following web content......sadfa      sdfj      asdjf      sadjf      sadjf      jsad      fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd      f      asdf      asd      f      adsf      asd      f      ads      fasd      f      asd      fasd      f      asd      fsad      f      adsf      asd      f      asdfasd      fasd      f      asdf      asd      fa      sdfa      sdjf      asdjf      aksdjfalskdjflkasdjflkjadslkjflkasf          </div>

hope move further in way want.

check fiddle here.