See It Your Way:

 
 

More Crazy Ideas

Now that you've built your own toggling stylesheets in HTML and CSS, you could go even further by building the same functionality in XML using XSLT rather than stylesheets.

Finding Out More

Have a look around the web for other toggle enthusiasts. The CSS Zen Garden is a great place to start which includes a variety of cool templates.

Class Assignment

The divisions are identified in this code. Your assignment is to capture this page and create your own CSS layout based on your favorite hobby.

Why Toggle?

Being able to present the same content but in a multitude of different ways is increasingly important in the web design business. You can demo the same website with a variety of different looks can be an important presentation and design tool when working with customers. Besides this, you can use your handy toggle stylesheet functionality to build in accessibility features like a high contrast or text-only view! You can even have a different look and feel for visitors coming from abroad or using a certain browser.

Posted by Author 05/20/2007 - Comments(2)

Liberate the Code

View Source on this page to see the HTML and JavaScript code that runs this page. Pay particular attention to the script in the head and the right_panel list. CSS techniques to make a page like this work are described in CIS125HTM (HTML), CIS125WSC (Dreamweaver), and CIS133JS (JavaScript).

Posted by obiWEBkenobi 09/20/2007 - Comments(2)

Same Website, Different Look!

Having a web design that can be presented in a multitude of ways also cuts down on costly, time consuming development time. You could even build a page so flexible, it could be viewed with half a dozen different stylesheets that radically change its look. By getting away from all that antiquated table stuff and laying everything out in highly adaptable DIVs, we can make our designs more powerful.

Posted by Author 05/20/2007 - Comments(4)


Have a go at tweaking this code yourself and turning into an even more impressive series of toggles.