boot1212

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<nav class="navbar navbar-dark bg-secondary p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div id="idDiv1" class="col-auto bg-warning">
      <h1>Оглавление</h1><br>
      Пункт 1<br>
      Пункт 2<br>
      Пункт 3<br>
    </div>
    <div class="col bg-light">
      <h1 class="display-1">Текст</h1><br>
      <button type="button" class="btn btn-primary" onclick="toggleDiv1()">Оглавление</button>
    </div>
  </div>
</div>

CSS

.col-1 {
  padding: 0px;
  width:0px !important;
}

.col-anim {
  transition: all 500ms;
}

JavaScript

var flag = 0;

function toggleDiv1() {
  if (flag == 0)
  {
    document.querySelector('#idDiv1').classList.replace('col-1', 'col-auto');
    flag = 1;
  }
  else
  {
    document.querySelector('#idDiv1').classList.replace('col-auto', 'col-1');
    flag = 0;
  }
}

var width = document.querySelector('#idDiv1').offsetWidth;
document.querySelector('#idDiv1').setAttribute('style','width:' + width + 'px');
document.querySelector('#idDiv1').classList.add('col-1');

setTimeout(function(){
    document.querySelector('#idDiv1').classList.add('col-anim');
}, 500)