Click a heading to see the content; click the heading again to hide the content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus turpis. In mollis lacinia libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sollicitudin nisl in diam sagittis facilisis. Cras nonummy lectus sed urna. Aliquam sem tellus, convallis sollicitudin, pulvinar quis, aliquam id, lorem. Donec sapien. Cras odio orci, dictum id, lacinia a, aliquet eget, nisl. Maecenas iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dictum risus eget nunc. Sed vestibulum congue nisi. Quisque rutrum.
Quisque leo nisi, egestas ac, hendrerit ut, congue in, tortor. Aliquam diam sapien, feugiat iaculis, cursus quis, commodo ut, urna. Vivamus aliquam, lectus in pellentesque posuere, metus pede condimentum lectus, laoreet varius velit mi vitae tellus. Praesent sed neque. In eget sem non felis hendrerit pulvinar. Mauris varius magna vel felis. Vestibulum est velit, posuere a, sodales sed, sollicitudin nec, nisi. Morbi in quam. In rutrum, nisl vel venenatis mollis, justo nisi pellentesque sapien, quis porttitor metus leo sit amet lorem. Aliquam a pede quis eros condimentum laoreet. Nullam fermentum ante in tellus sagittis lacinia. Sed vitae massa. Nam mattis, quam tincidunt scelerisque scelerisque, enim quam aliquam massa, sed euismod erat ligula a tortor. Phasellus velit. Nulla fringilla elementum neque.
Morbi nulla nunc, molestie vel, vestibulum nec, pharetra at, lectus. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Mauris semper euismod ligula. Donec tincidunt metus nec dui. Morbi mi. Mauris vitae ligula nec elit tristique mattis. Mauris ante. Curabitur imperdiet purus. Morbi sollicitudin suscipit diam. Duis aliquam, augue quis dictum iaculis, tortor leo dignissim lacus, et luctus quam quam in elit.
As you can see from the picture above, any old combination of HTML elements can go inside the dynamic display DIVs.
| Name | Age | Occupation |
|---|---|---|
| John Q. Public | 27 | Plumber |
| Jane Doe | 50 | Bank vice president |
| Mike Smith | 12 | Student |
This section shows that you can actually name your hidden DIVs anything you want, and the script should still properly display text.
It makes more sense to use a standard naming convention, but so long as the argument you pass to the toggleDisplay() script matches the name of the DIV that holds the dynamic content, the script will still work.
Displaying And Hiding Content Via JavaScript / DOM And The OnClick Event