Div stay visible on click focus

Question

I have tried alot but dont know how to do it.

Im trying to do box sliding out from the site like the one on facebook but in 100% css and html. I can make it with the hover but the way i am looking for is the click and if you click outsite the box it would slide back in again

Thank You

Answer 1

Clicking on the textbox sets the focus there, so it won't be on the span next to it. Change your CSS so that the textbox is visible when focus is there as well.

span:focus ~ .to-be-changed, .to-be-changed:focus {
    ...
}