| Collapsible Document... |
|
The Collapsible DocumentThis trick uses DHTML (or Dynamic HTML) to achieve the effect of hiding or revealing parts of the document on the click of the mouse. It's most obvious use is to expand or collapse a list. The user clicks a heading to reveal a list, then clicks again to hide it. Try out the example below... Articles
The second example works the same way, but I've made hyperlinks out of the list items (the link opens in a new window). Notice too that the mouse pointer changes when it's over the the heading. It didn't in the previous example... Tutorials
You would normally expect the mouse pointer to change when placed over a hyperlink. Here, the list heading is not a hyperlink, but you need the user to click it anyway. You need to tell them what to do, then reinforce that visually by having the mouse pointer change when it's in the right place. You can invoke any of the standard mouse pointers (find out how...). The following example expands whilst the user's mouse is over the heading, then collapses as the mouse moves away... JavaScript Tricks
At first, I couldn't think of a sensible use for this trick. Then I visited a page that had a pop-up navigation bar. See how I created my own collapsible navigation bar using this script. Try it with a picture (this really is a stupid trick). Point at the heading below.. Point at Me
Read on to find out how to use these effects in your own pages. I'll explain how do do it, how it works, and you can download a file containing the sample code. If you haven't used sample code like this before, read my downloading tips to find out what to do. How It's Done: The Collapsible ListStep 1: Insert this code into the HTML of your document at the point where you want to see your list. <h4 onClick="mylist()">List Heading</h4> <div id="mylist" style="display=none"> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </div> Change the heading style and text, and the text of the list items, as necessary. You may want to add more items to the list, or remove some. If you want you can change mylist to something more meaningful, but make sure you make matching changes in the second part of the code... Step 2: Now insert the following code into the <head> section of the HTML. <script>
<!--
function mylist() { if
(this.document.all.mylist.style.display=="none")
(this.document.all.mylist.style.display="block") ;
else (this.document.all.mylist.style.display="none") ; }
// -->
</script>
If you want more than one collapsing list on a page, simply repeat the process for each section. Remember to give a different name (the mylist bit) to each. When adding to the script section, you need only repeat the code
between the
How It's Done: The Collapsible Navigation BarFirst, take a look at a page containing a collapsible navigation bar. In my navigation bar I wanted the list of links to appear as the user's mouse passed over the heading. I didn't want the user to have to click the heading. This would give me a navigation bar that could contain several headings, each of which would automatically expand into a list of links as the user's mouse passed over the heading. The list would then collapse as the mouse moved on. This meant that I had to use an onMouseover and onMouseout pair of events. Also, each pair of events had to apply to the heading and its list to prevent the list collapsing as the user moved their mouse to click a link. I like using tables to lay out my pages so I made the navigation bar out of a single-row table with each list in its own cell. I applied the events to the table cells themselves rather than the lists. This gave me the desired effect. Step 1: Place this code in the HTML of your document where you want your navigation bar to appear... <table border="0" width="100%"> <tr> <td valign="top" onMouseover="group1show()" onMouseout="group1hide()"> <h4>Group One</h4> <div id="group1" style="display=none"> <p> <a href="http://www.fontstuff.com">Item One</a><br> <a href="http://www.fontstuff.com">Item Two</a><br> <a href="http://www.fontstuff.com">Item Three</a> </p> </div> </td> </tr> </table> I've only shown the code for a single list. You will probably want more. Just repeat the section <td...> to </td>, changing the heading and list items to suit yourself. Make sure each section has it's own unique id and event names (e.g. change "group1" to "group2", "group1show()" to "group2show()" etc. - you can call them what you like as long as they are different.) Step 2: Now insert the corresponding code into the <head> section of the HTML. <script>
<!--
function group1show()
{this.document.all.group1.style.display="block"}
function group1hide()
{this.document.all.group1.style.display="none"}
// -->
</script>
If you have added additional lists in Step 1 you will need to add corresponding functions, their names matching the event names in your lists.
|
||||
| ^ top | |||||
|
|
