[css-display-3][editorial] Add 'visibility' example.

Author: tabatkins

css-display-3/Overview.bs

@@ -1147,6 +1147,44 @@ Invisibility: the 'visibility' property</h2>
 	<em>is</em> rendered to speech,
 	and may be interacted with using non-visual/spatial methods.
 
+	<div class=example>
+		While temporarily hiding things with ''display: none''
+		is often sufficient,
+		doing so removes the elements from layout entirely,
+		possibly causing unwanted movement or reflow of the page
+		when an element is hidden or shown.
+		''visibility: hidden'' can instead be used
+		to keep the page's layout stable
+		as something is hidden and displayed.
+
+		For example,
+		here is a (deliberately simplified) possible implementation of a "spoiler" element
+		that can be revealed by clicking on the hidden text:
+
+		<xmp highlight=markup>
+			<p>The symbolism earlier in the movie becomes obvious at the end,
+				when it's revealed that <spoiler-text><span>Luke is his own father</span></spoiler-text>,
+				making the wizard's cryptic riddles meaningful.
+			<style>
+			spoiler-text { border-bottom: 1px solid; }
+			spoiler-text > span { visibility: hidden; }
+			spoiler-text.shown > span { visibility: visible; }
+			</style>
+			<script>
+			[...document.querySelectorAll("spoiler-text")].forEach(el=>{
+				el.addEventListener("click", e=>el.classList.toggle("shown"));
+			});
+			</script>
+		</xmp>
+
+		Advisement: This example is deliberately significantly simplified.
+		It is missing a number of accessiblity and UX features
+		that a well-designed spoiler element would have
+		to show off the 'visibility' usage more plainly.
+		Don't copy this code for a real site.
+	</div>
+
+
 
 <!--
 ████████  ██     ██ ██    ██         ████ ██    ██