techno blog

I institute the code on StackOverflow for a uncomplicated CSS based hide/show scenario , it is an incredibly curt slice of code, exactly for the uninitiated it is hard to sympathise at showtime what is truly going on. So what I did showtime is to intermission downward the CSS into what happens at page charge fourth dimension as well as what happens at the indicate at which a target is linked to: /* happens on charge */ .answer, #show { display: none; } /* happens when demo is clicked */ #hide:target { display: none; } #hide:target + #show, #hide:target .answer { display: inline; } To explain: At charge fourth dimension whatever chemical component division where the shape is answer  or the id is show  is laid upwardly non to display.  When a target amongst an id of hide is "targeted", i.e. from a link amongst <a href="#hide">[Text]</a> , then: the content amongst the hide id volition non display. any chemical component divi...

In the last blogpost , I helped to depict the CSS exhibit as well as cover text posted to StackOverflow. Here I hold off at adding CSS for a smoother transition past times modifying a transition example every bit good 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 nosotros commencement of all cover the text that nosotros desire to exhibit afterward (i.e. the cover button). We every bit good practice a wrapper for the text hence that it tin live invisible past times commencement of all creating what is essentially a box as well as placing it exterior this box, hence that it doesn't appear on screen, precisely hence that it doesn't postulate to live off the actual move past times of the page every bit a starting point. /* click ...