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.
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).
This spoiler can be expanded in one direction only. Collapsing behaviour is still the same. The difference is just a few lines in CSS.
Keep reading to see how it is done.