Web Design/Layout toggle

This is a demonstration for toggling between two layouts using a script that toggles between the CSS class names " " and " ".

The HTML document used in the demo has the style sheet and script on board, embedded using  and   tags respectively. The appearance of the elements is determined through classes in the style sheet. The items' descriptions are hidden in grid view. The source code is annotated with comments.

This demonstration also makes use of tooltips using the  attribute, showing additional details when the pointer is hovered on some of the elements.

When the user toggles between the list and grid views, the text in the button is changed accordingly. The script memorizes the last used view by storing it into a browser cookie, and loads it when opened the next time. The Firefox browser stores cookies for local HTML files, as has been successfully tested. A localhost server might be necessary to test this feature on a different browser.

At the end of the script, the one list item is multiplied between 10 to 50 times and sets a random background colour for variety. This would not be done on an actual website, and serves for illustration in this demo.