Old Home Outlining
An approach to outlining...
I've developed a PHP-based method to produce (web) pages where content can be hidden and expanded as needed. It does not use JavaScript, however a JavaScript-enhanced version could be developed. Since it is a server-side technique, the page has to be re-loaded whenever a change is made to what is displayed; using JS all the content would be loaded once, and control of the styles would be managed by user-agent code. I feel that is is preferable for accessability and usability reasons, when developing a technique like this, to not rely on JS, then to add the JS later.
A sample:
1 A demonstration of outlining. Click on... |
|
- This is a list
- that has been hidden.
2 the buttons at the right to see what happens. |
|
This is a paragraph that was hidden 'till you clicked to see it.
3 Some lorem ipsum for those who need their daily fix: |
|
Lorem ipsum dolor sit amet consectetuer condimentum Sed mauris orci purus. Ullamcorper a risus et eros vitae vel dis dictumst pellentesque suscipit. Ligula vitae leo Phasellus a sit porttitor In ultrices velit a. Pede Morbi leo et ut id semper metus dolor dictum urna. Eu convallis libero sed mi ut mauris lorem neque in auctor. Nascetur faucibus Maecenas Lorem auctor.
Nam Nam et Phasellus convallis platea Phasellus neque ante et eros. Enim semper porta amet libero et sociis ut a et euismod. Consectetuer vel magna Aenean dui tortor auctor Nulla Vestibulum wisi et. Et at orci ac Curabitur semper In In elit wisi velit. Nibh pede vitae fames leo sollicitudin pretium nunc congue interdum nibh. Pellentesque molestie Nullam auctor Donec enim convallis quis tristique.
The “<” and “>” buttons select the previous/next sections, the “=” button selects the item, and the “0” button (when it exists) turns all the items off (the initial state). Clicking on the “<” button on the first entry causes all the items to be expanded. “All” buttons can be easily added, either to the page, or to each heading, or both.