Нав содержание таблицы развернуть и свернуть Bootstrap 4

Question

У меня проблема с расширением и свертыванием «таблицы содержания» с помощью кнопки в Bootstrap 4.

Вот мой код: https://codepen.io/nht910/pen/RwwwyKB

Фрагмент:

<div class="main-wrapper col-12">
    <div class="post-wrapper">
        <div class="post-body d-flex">
            <div class="post-content">
                <p>...</p>
            </div>

            <div class="post-toc">
                <!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->         
                <nav class="sticky-top" id="toc"></nav>
            </div>

        </div>
    </div>
</div>

Не могли бы вы, ребята, помочь мне поместить «таблицу контентов» в кнопку «Колапс», и при нажатии на нее мы видим анимацию, подобную изображениям ниже.

Большое спасибо, ребята.

Answer 1

Чтобы оживить боковое меню, вы должны сделать transformation и сдвинуть меню, используя translateX(100%);. Затем вы можете добавить transition: all 300ms;, чтобы получить эффект скольжения.

При перемещении вам также потребуется изменить ширину бокового меню, чтобы содержимое заполняло пространство бокового меню.

Я думаю, что достиг желаемого эффекта, пример ниже: https://codepen.io/diogoperes/pen/NWWWMYW

Answer 2

Я добавил анимацию с помощью jQuery, а также добавил кнопку и несколько классов Bootstrap, чтобы ваш основной контент был в центре.

Вот метод jQuery:

$(function() {
  $("#toc-button").click( function() {
    $(".post-toc").stop(true).animate({width:'toggle'}, 400);
  });
});

Пример здесь: https://codepen.io/evelyng/pen/XWWWqYg