CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Thuat Nguyen
Thuat Nguyen

Reputation: 272

Make JS width: toggle has beautiful animation

I have the below code:

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

Expand/collapse:

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

When i click on TOC button, the table of contents will be expanded. But the expand/collapse effect is quiet ugly.

I am just a newbie so can you guys please help me to make expand/collapse has better effect like slide effect,...?

Thank you guys so much.

Upvotes: 0

Views: 88

Answers (1)

craft9861
craft9861

Reputation: 214

Try the JQuery slideToggle() method.

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);
        });

Upvotes: 1

Related Questions