Make adjacent div responsive to sibling's transformation

I have three inline-block divs on my page (see JSFiddle):

enter image description here

Div #one contains a button ‘Show’ and is absolutely positioned so that it overlaps the div #two. When ‘Show’ is clicked, div #two slides out from under #one using translateX, like so:

enter image description here

When this happens, I would like to push div #three down so that it appears just below div #two, like so:

enter image description here

I’m not sure how to go about achieving this using pure CSS that doesn’t involve moving #three along the Y-axis using #three { transform: translateY(...) }. I was wondering if translateX is the wrong approach here since it does not disturb the position of neighbouring elements, but I don’t know what to use in its place.

Add Comment
1 Answer(s)

As I have already stated in the comment section: It really depends on what your final goal is and what content you put in your divs – how everything is structured.

I feel like this is more of a XY-problem. I.e. the design-choice demands for a special case/solution that could be solved in another way so that the "hacky" solution does not have to exist in the first place.

Nevertheless, since you have asked for it I give you a solution for this specific problem:

const container = document.querySelector('.container'); const slide = document.getElementById('show'); const done = document.getElementById('hide'); const two = document.getElementById('two'); const right = document.querySelector('.right');  show.addEventListener('click', function() {   two.classList.add('show');   right.classList.add('shift'); });  hide.addEventListener('click', function() {   two.classList.remove('show');   setTimeout(function() {     right.classList.remove('shift');   }, 1000)  });
.left, .right {   position: relative;   height: 200px;   margin-top: 5px;   display: inline-block;   border: 1px solid black;   float: left; }  .left {   width: 100px; }  .right {   width: 200px;   margin-left: 10px;   transform: translateX(0); }  .right.shift {   clear: left;   display: block;   float: none;   transform: translateX(100px); }  #one, #two {   height: 100%; }  #one {   background-color: lightblue;   position: absolute;   z-index: 1; }  #two {   background-color: yellow;   transform: translateX(0);   transition: transform 1s; }  #two.show {   transform: translateX(100%); }
<div class="left">   <div id="one">     Click 'Show' to show panel 2     <button type='button' id='show'>Show</button>   </div>   <div id="two">     Click 'Hide' to hide panel 2     <button type='button' id='hide'>Hide</button>   </div> </div> <div class="right">Some other content</div>

Alternative

You could implement a spoiler section that you can toggle to display more information if it is desired.

const spoilerBtn = document.getElementById('spoiler-btn'); const spoiler = document.getElementById('spoiler');  spoilerBtn.addEventListener('click', function() {   spoiler.classList.toggle('show'); });
.left, .right {   position: relative;   height: 200px;   margin-top: 5px;   display: inline-block;   border: 1px solid black;   float: left; }  .left {   width: 100px; }  .right {   width: 200px;   margin-left: 10px; }  #spoiler {   background-color: tomato;   display: none; }  #spoiler.show {   display: block; }
<div class="left">Aside text here</div> <div class="right">   Toggleable section: <button id="spoiler-btn">toggle</button>   <div id="spoiler">This content can be toggled</div>   <p>Some other content</p> </div>

Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.