Revealing the vanished text is also an easy matter: the trick is to create a special-purpose style sheet to control the concealing/expanding. "Sheet" sounds portentous, but an extra line of code in the head area of a document fits the bill just as well. Just tack this additional <STYLE>
element on below any existing style information:
<style type="text/css" media="all">
.vanish {display: none;}
</style>
Documents can have multiple <STYLE>
elements, and one of the greatest features of today's browsers is that these, and all the external style sheets, can be enabled or disabled singly. If the browser employs the W3C Document Object Model, then it accesses all the style sheets as a numbered "collection": the first in the collection is numbered [0], the second [1] and so on.
Now consider what would happen if we disabled the style sheet above, the one that does the concealing. All the other style sheets would stay in operation, but the concealing mechanism would become ineffective. And, logically enough, the concealed material would come out of hiding and the entire document would be "painted" on the screen or put on paper by a printer.
Here's how. Count how many style sheets (external or embedded) are referred to in your document and ascertain the index number of the one that does the concealing. This is the item you want to switch on and off. Suppose it is the second style sheet (index number = [1]). Then you will have to insert the following code somewhere in the text of the document:
<input type="button" value="Show Complete Text" onclick="document.styleSheets[1].disabled = true">
To make the whole business user-friendly, add another button to undo the effect:
<input type="button" value="Hide Non-Essential Info" onclick="document.styleSheets[1].disabled = false">
Have a look at an example. Don't forget to View ... Source. This should work in most browsers apart from Netscape 4.x.
If you prefer the document to load at the very beginning in the expanded view, add the word "disabled" to the style tag as follows:
<style type="text/css" media="all" disabled>
This will however only be honoured by Internet Explorer browsers.
And should you be wondering why the attribute media="all"
was used in the <STYLE>
tag above, study an explanation by Liam Quinn. The value "all" forces the under-endowed, 1997-vintage browser Netscape 4.x to display the expanded document with no collapse mechanism.
Examples: • Headings • Two Sub-Headings • Three Sub-Headings • The Core as List • Single-Item List • Expanding Text • Run-In Headings • Compilation • Variation
Piggin.Net Macro-Typography
by Jean-Baptiste
Piggin is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.