Explaining The Basics Of A Show/Hide Implementation Of The Css :Target

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:

1. 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:

1. the content amongst the hide id volition non display.
2. any chemical component division amongst the show id that instantly follows the target volition display, every moment volition whatever chemical component division amongst the shape of answer which follows that enshroud target at whatever point.

There is no code whatsoever hither that handles the hiding of content based on a link beingness clicked.

Let's at nowadays await at the HTML

<a href="#hide" id="hide">Show</a> <a href="#" id="show">Hide</a> <div class="answer"> Answer</div> 

Here nosotros run across that the hiding happens past times a uncomplicated reload of the page, which occurs through an empty target beingness clicked. This reinstates what happened when the page showtime loaded as well as returns us to a acre where elements amongst the shape answer are hidden along amongst those amongst the id show. (Note: every moment amongst all HTML the id should survive a unique value exclusively appearing ane time on a page, whereas the shape cite tin forcefulness out survive repeated.)

Follow @sketchytech