How to slide div over when showing another div of variable width with CSS and Jquery?

Question

$('#div-1').click(function() {
    if ($('#div-2').hasClass('shown')) {
    $(this).css('left', 0);
    $('#div-2').removeClass('shown');
  } else {
    // $('#div-2').css('width', 'auto');
    $('#div-2').addClass('shown');
    $(this).css('left', $('#div-2').width());
    
  }
})

#div-1 {
  background-color: red;
  position: absolute;
  width: 25%;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  z-index: 1;
}

#div-2 {
  background-color: blue;
  position: absolute;
  max-width: 0;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  overflow: hidden;
}

.shown {
  min-width: 25% !important;
  max-width: 500px !important;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-1"></div>
<div id="div-2">
  <p>I want all this text to show up and it could be any length...</p>
</div>

I have two divs and one starts out hidden (with 0 width, not hidden display). When you click on the other div, I need the hidden div to slide out and push the click div out of the way as far as it needs to be pushed. The hidden div contains text that could be of variable length. In essence, I want to change the hidden div's width from 0 to auto and shift the click div over to the right by this new amount. I know you can't animate auto so I have been using the max-width trick shown here.

My problem is that the click div seems to slide out to the hidden div's new min-width but not to its actual width. Here is a fiddle of the problem: https://jsfiddle.net/tjfhzvd9/1/. Click on the red box in that fiddle to see why this is not working. I want that div to slide as far as it needs to but no farther.

I also tried doing this with Jquery.animate() but that did not work either. Your help is appreciated.

score 0 · Answer 1 · answered Nov 07 '20 at 16:42

Here is a pure css solution:

HTML:

<div id="container">
  <div id="div-2">
    <p>I want all this text to show up ...</p>
  </div>
  <div id="div-1"></div>
</div>

CSS:

#container {
  display: flex;
  flex-direction: row;
}
#div-1 {
  background-color: red;
  width: 25%;
  min-height: 100vh;
}

#div-2 {
  background-color: blue;
  width: auto;
  max-width: 0;
  transition: max-width 1s ease;
  overflow: hidden;
}

.shown {
  max-width: 75% !important;
}

JS:

$('#div-1').click(function() {
    $('#div-2').toggleClass('shown');
})

CSS solution works fine but you may notice an undesirable text rendering effect. This happens because a paragraph constantly adapts it's width to the parent container's width during animation cycle. We should set a fixed width on the paragraph before running the main animation cycle:

var div2MaxWidth = 0;

// Get div2 max width

$('#div-2').css({
  transitionDuration: '0s',
  maxWidth: '75%', // <=== 100% - red.width
  position: 'absolute',
  visibility: 'hidden'
});

div2MaxWidth = $('#div-2').width();

$('#div-2').css({
  maxWidth: '0',
  position: 'static',
  visibility: 'visible'
});

// Set fixed width to the paragraph inside div2 and restore transition's duration

$('#div-2 > p').width(div2MaxWidth + 'px');
$('#div-2').css('transitionDuration', '1s');


$('#div-1').click(function() {
    $('#div-2').toggleClass('shown');
})

How to slide div over when showing another div of variable width with CSS and Jquery?

1 Answers1