The idea of this code is to create a button with a cross on the right side and when you click, it rotates the cross and expands a hidden div. To slide up you can click on the button or on a round circle on the bottom of the div.

Everything was made using HTML, JavaScript and CSS.

You can also check a demo here.



To have better rotation control I used an awesome jQuery addon library called Transit (http://ricostacruz.com/jquery.transit/) that add many transitions & transformations functions.

The cross is actually an “╳” with a 45 degree rotation, and the bottom button was made entirely using css.

Check this project on github.

If you have any question let me know! 😛