css - appear and disappear effect for div by clicking on it -

i can't understand how make in site: __smashingmagazine.com

if u resize window, search button. so... try click on search icon... new div appear search input. , pay attention behavior of it: no matter u gonna next div won't hide self, if click on 'x' appear instead of search icon... , pure css, right?! how possible... found article: click here

but behavior very, different... , don't @ all.

any idea how make work in site above? may help!

thanks!

the example smashing magazine uses :target psuedo class change css of elements when anchor clicked. here's simplified breakdown of how they've achieved behaviour.

the anchor configured set fragment identifier in url, in case of smashing magazine #ms. have anchor this:

<a href="#ms">search</a> 

when clicked fragment identifier set #ms, use make search appear using :target psuedo class.

#ms {     display: none; } #ms:target {     display: block; } 

when fragment identifier set #ms, :target styles activated, displaying search.

here's simple example: http://jsfiddle.net/we76l66h/

they using :target children (#ms:target + div.example) change styling of children within targeted element. how make button change "close" button when #ms fragment identifier set.