Css Exhibit As Well As Shroud Alongside Transition (Using :Target)

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 triggered css */ #hide:target {     display:none; }  #hide:target + #show {     display:inline; }  #hide:target   .wrapper > .answer {     transition: 0.5s;     top: 0px;      opacity:1;  }  

We as well as hence gear upward what is going to direct house when the link that targets the chemical component subdivision alongside the cover id is clicked: the reply (which is a tike [>] of the wrapper, which is inwards plough a sibling [ ] of the cover element) volition fade inwards as well as come upward downwards every bit a means of smoothing the appearance. Now for the HTML:

<a href="#hide" id="hide">More...</a> <a href="#" id="show">Hide</a> <div class="wrapper"> <p class="answer"> Here is the information you lot were looking for.</p> </div> 

As you lot tin run into the move is beingness done past times the CSS as well as the solely matter that the HTML is doing on its ain is resetting the page when you lot click hide.

Follow @sketchytech