JavaScript spoiler with a twist (collapsing up or down)

Thu, 07 Sep 2017 21:28:11 +0300

I thought that I will eventually need to use spoilers in this blog to hide long and optional blocks of text. And at the same time I’m often unhappy with collapsible block implementations across the Internet.

So I decided to design my own spoiler with one useful feature: it can be collapsed not only from the top edge but also from the bottom edge — you will not lose the line you were reading and you don’t have to scroll all the way to the beginning of the spoiler.

Examples:

click to show

This spoiler can be expanded up and down. And your mouse is left right over the button you just pressed whenever it is possible (on top and bottom of a page there may be not enough stuff to keep it so, obviously).

click to show

This spoiler can be expanded in one direction only. Collapsing behavior is still the same. The difference is just a few lines in CSS.

click to show

Keep reading to see how it is done.

slideToggle on MXI

JavaScript spoiler with a twist (collapsing up or down)