sketchyTech

In the last blogpost, I helped to describe the CSS show and hide text posted to StackOverflow. Here I look at adding CSS for a smoother transition by modifying a transition example also on StackOverflow.

/* onload css */ #show { display:none; } .wrapper { position: relative; overflow: hidden; width: 300px; height: 300px; } .answer { position: absolute; top: -10px; transition: 0.25s; opacity:0; }
In the CSS that styles the HTML page when loaded we first of all hide the text that we want to show later (i.e. the hide button). We also create a wrapper for the text so that it can be invisible by first of all creating what is essentially a box and placing it outside this box, so that it doesn't appear on screen, but so that it doesn't need to be off the actual top of the page as a starting point.

/* click triggered css */ #hide:target { display:none; } #hide:target + #show { display:inline; } #hide:target ~ .wrapper > .answer { tr…

I found the code on StackOverflow for a simple CSS based hide/show scenario, it is an incredibly short piece of code, but for the uninitiated it is difficult to understand at first what is actually going on.

So what I did first is to break down the CSS into what happens at page load time and what happens at the point at which a target is linked to:
/* happens on load */ .answer, #show { display: none; } /* happens when show is clicked */ #hide:target { display: none; } #hide:target + #show, #hide:target ~ .answer { display: inline; } To explain:
At load time any element where the class is answer or the id is show is set not to display.  When a target with an id of hide is "targeted", i.e. from a link with <a href="#hide">[Text]</a>, then:
the content with the hide id will not display.any element with the show id that immediately follows the target will display, as will any element with the class of answer which follows that hide targe…