<p>I have a project where I want a div to appear as a large box and three other divs to appear below as small boxes and when you click on a small box it will change size using a css transition effect and align with the big box Swap positions to smooth movement and size changes. Currently I'm trying to use jQuery but the positioning doesn't work at all. Here's my current example: </p> <p>https://jsfiddle.net/v3pmhawj/1/</p> <pre class="brush:php;toolbar:false;">$(function () { let { left: x1, top: y1 } = $('.full-size-card').offset() $('.inactive-sheets .card').on('click', function() { let { left: x2, top: y2 } = $(this).offset() let curr = $('.full-size-card') let diffX = x2 - x1 let diffY = y2 - y1 $(this).css({ left: -diffX, top: -diffY }) $(this).addClass('full-size-card') curr.css({ left: diffX, top: diffY }) curr.removeClass('full-size-card') }) })</pre> <p>If anyone has suggestions involving other libraries or other technologies, I'm willing to listen. I want to be able to move the divs around in the DOM, but as far as I know if you do that you can't do a css transition effect on them because the only way (that I know of) is to remove and re-add a copy of the element in the DOM. </p>

  
A
  
B
  
C
  
D

.card-container {
  position: relative;
}

.card {
  transition: all ease 1s;
  position: absolute;
  font-size: 24px;
  border: white 4px solid;
  box-sizing: border-box;
  cursor: pointer;
}

.small {
  width: 100px;
  height: 100px;
  background: blue;
  left: 0;
  top: 300px;
}

.small ~ .small {
  left: 100px;
  background: green;
}

.small ~ .small ~ .small {
  left: 200px;
  background: yellow;
}

.large {
  width: 300px;
  height: 300px;
  background: red;
  left: 0px;
  top: 0px;
}

const smallCards = document.querySelectorAll('.card');

smallCards.forEach((smallCard) => {
    smallCard.addEventListener('click', (event) => {
    const largeCard = document.querySelector('.large');
    
    largeCard.className = "card small";
    event.target.className = "card large";
  });
});