Inline position of 2 divs with firstchild with auto and second Child with 50%

Question

I would like to build a slidepanel with js. For that I would like a div that resizes when slider opens. Trying to do as following:

html

    <div class="wrapper">
       <div class="left">original content</div>
       <div class="right">sliding from right side</div>
    </div>

css

    .wrapper {width:100%;height:100%;position:relative;}
    .left {width:auto;height:100%;display:inline-block;}
    .right {width:50%;height:100%;}

This is the basic setup. I would like to have left take the full width. But when I click a button I want right to Slide in to 50%. Before adding js, I am trying to position the two divs, but it does not work. I tried with table cell, flex, ... I m just not able to get it right. Someone a good tip?

http://stackoverflow.com/q/23794713/3597276 – Michael Benjamin Dec 15 '16 at 21:12 — Michael Benjamin, Dec 15 '16 at 21:12

score 2 · Accepted Answer · edited Dec 15 '16 at 22:16

2

$("#expand").on("click", function(){
  $(".wrapper").toggleClass("expand");
});

.panel {
  height:100vh;
  transition: width .5s;
}
.left {
    float:left;
    width:100%;
    Background:red;
    Text-align:right;
  }
  .right {
    float:right;
    width:0%;
    background:#ddd;
    overflow:hidden;
  }
.pos {right:5px;}

.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="panel left">
    original content
    <button class="pos" id="expand">Click</button>
  </div>
  <div class="panel right">sliding from right side</div>
</div>

edited Dec 15 '16 at 22:16

user3799112

71
12

answered Dec 15 '16 at 20:15

Slonski

824
5
12

Working solution. Only the js is not working because it is in conflict with the fullpage.js – user3799112 Dec 15 '16 at 22:10
This is the url – user3799112 Dec 15 '16 at 22:18
The name of the wrapper was bad. Changed the width in the meantime. Thanks so much! – user3799112 Dec 15 '16 at 22:40
You have `width:auto` instead of `width:100%` for .left in your site. Also, you have to change `.wrapper` to `.standorte-wrapper` in `$(document).ready` – Slonski Dec 15 '16 at 22:40
Now I have a new challenge. The toggle for some reason changes my hash :D – user3799112 Dec 15 '16 at 22:43
What is your hash? – Slonski Dec 15 '16 at 22:46
Should be #locations, but after toggle its just #. But I was using an . Just changed it to button, like you did. Buttons are not handled by fullpage.js. So works fine now. Otherwise I had to write a script just to keep that link out of the fullpages..js hashflow. I might try later on to add build a specific link for each slide in will have on that page. – user3799112 Dec 15 '16 at 22:50

Inline position of 2 divs with firstchild with auto and second Child with 50%

1 Answers1