This page demonstrates how to use Javascript to dynamically hide/show sections of a page (contained in <div>'s). Browsers without Javascript (or with Javascript disabled) will simply display all sections. Design goals were:
onload event), if a
browser has insufficient DOM
support or has Javscript disabled, they will simply stay visible.
onclick code of the link doesn't work, the
href will still cause the browser to navigate to the
appropriate section.
<a name="...">
anchor to which the links refer, the current section will be part of the
URL. At page load time, the URL is analysed, and if it contains a section
name, that section will be activated.
Below you'll find an example implementation of these principles. Modern browsers (Opera 7, Mozilla 1.3, IE 6) will display the sections in an interface vaguely resembling tabs. Netscape 4.8 will simply display the page contents in it's entirity, unstyled. Note that I haven't found a way yet to hide the styling from Internet Explorer 4, which is also not able to display the page properly. (The example uses a fair bit of CSS to make it (hopefully) more visually appealing, but none of this is required for the example to function as intended.)
1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In a odio et felis dictum luctus. Sed pharetra ipsum nec lacus. Curabitur sapien. Aenean nonummy lacus. Sed orci orci, venenatis vel, posuere non, mollis et, augue. Donec non lectus rutrum sem pulvinar congue. Nunc condimentum neque ac odio. Cras volutpat. In porttitor, nulla vitae porttitor blandit, diam purus vulputate lorem, a porttitor libero magna non est. Integer non lorem. Suspendisse massa urna, condimentum rhoncus, vehicula sit amet, fringilla id, orci. Curabitur wisi. Donec ipsum tellus, dictum pulvinar, dignissim at, laoreet a, leo. Etiam magna mauris, facilisis et, lacinia a, gravida ut, justo. Curabitur convallis sodales felis. Donec felis dolor, rhoncus id, sodales ut, consequat a, magna. Donec eu odio vitae ipsum egestas convallis. Nullam blandit est sed sapien.
2: Duis a elit. Nam consequat, urna at facilisis bibendum, sem libero malesuada sem, nec lobortis felis velit vitae mi. Curabitur gravida sapien ut est. Proin condimentum eros eu leo. Vestibulum a turpis. Proin scelerisque rutrum mi. Pellentesque ac dui. Aliquam aliquet neque non eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus bibendum ipsum non massa. In lacus augue, condimentum non, pharetra in, lacinia quis, justo. Nullam erat turpis, scelerisque non, aliquam eu, ultrices et, ante. Praesent in quam eget lectus ultricies iaculis.
3: Pellentesque non neque ut mi lacinia accumsan. Etiam nec sem non nibh consectetuer fringilla. Sed tincidunt mi sed lectus. Curabitur ligula quam, ullamcorper eget, porta et, consequat sit amet, risus. Mauris a erat. Sed eget quam sed odio suscipit imperdiet. Ut lacinia semper sem. Phasellus eleifend. Proin nec diam. Aenean ac est rhoncus orci dictum vehicula
Check HTML - Check CSS - Index