Make JS width: toggle имеет красивую анимацию

Question

У меня есть следующий код:

https://codepen.io/nht910/pen/qBBjgGy

Развернуть / свернуть:

$(".post-toc").stop(true).animate({width:'toggle'}, 200);

Когда я нажимаю кнопку TOC, оглавление будетрасширен. Но эффект расширения / коллапса довольно уродлив.

Я просто новичок, так что вы, ребята, помогите, пожалуйста, сделать так, чтобы расширение / свертывание имело лучший эффект, как эффект слайда, ...?

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

Answer 1

Попробуйте метод JQuery slideToggle ().

HTML:

    <div>
        <h1>This is a heading</h1>
    </div>
    <button>Button</button>

JS:

        var action = 'click';
        var speed = 1000;
        $('button').on(action, function() {
            $('div').slideToggle(speed);
        });