Show / Hide ~ Expand / Collapse Table ~ <Div>
I have some huge tables on Special Characters page that list character codes for HTML, CSS, Unicode and Glyphs
so i thought it might be nice to 'collapse' the tables if possible as the page had gotten to be 12 pages long. that's a Lot of scrolling..
this is the simplest code I can find and modify to do what I want
*note.. you can change the 'names' of the id (#) and classes ("u2668", "article" whatever, to a name that suits you or your application). these are the names from my Unicode table i built
*don't forget to change the id (# [ID]) name in the javascript. it's in 2 places, both in parentathese () ... function unhide(NAME-of-Your-Table-ID) and getElementById(NAME-of-Your-Table-ID)
| this is the css for the 'table'. it goes in the <head> of your document. (works as is, as an <?php include... statement too. | |
|---|---|
| Opens the 'style' section in the 'head' of your document |
|
| this is the hidden/unhidden 'id' for the main container ('box') [<div id="article">]
*always visible (does not 'hide') |
|
| this is the <div> section ('box') that actually expands / collapes, show / hide, is hidden / unhidden |
|
| these are the <div id="code" class="hidden" (or "unhidden" depending on if you what the div initially collapsed or expanded) |
|
| this can be changed to fit your taste. it's the look and feel of the Table text, color, border etc. |
|
| this defines the look and feel o the 'th' element (table head) |
|
| this defines the look and feel of the 'td' (table date, i call 'cell) |
|
| miscellaneous other style definitions.. |
|
| Closes your 'style' section in 'your head'...lol |
|
| this script also has to go into your 'head', after the style, but before you close the </head> |
|
| Now, you just need a 'link' (text, button, picture, whatever) to activate the javascript and Show / Hide (Expand / Collapes) your table. | { ☡ show hide chart } <a href="javascript:unhide('chart');" > |
So,, the structure of code in document body for actual hidden - unhidden div's
So, in your document body you will structure it something like this:
<div id="atrticle"> (add any 'style' or 'class' you want for your text)
*Note: Don't Close this div No </div> tag, that comes at the End
<p, div, table, h3, etc.. > What ever content you want, blah, blah, blah.... </p, div, h3, etc >
<div class="hidden"> The content of the Divide that will Expand / Collapes, Hide / Show, be Hidden / UnHidden etc..
again, you can use 'style=' or 'class' to structure or 'decorate' your text as you'd like
*Note: the class='hidden' says the initial state of the div is 'hidden' (collapsed). If you want the initial state to be 'unhidden' (expanded) then use class="unhidden", simple
*Note:Now you can close both div's
</div> (closes the 'code' hidden / unhidden div)
</div> (closes the parent div 'article'
download a very clean, clear example (template) of the Hidden-Unhidden code - Complete
with style for tables
Landis ☡