Toggle-O-Matic Suite
Overview
The Toggle-O-Matic Suite is comprised of 3 useful behaviors: Toggle-O-Matic
Class, Toggle-O-Matic Display and Toggle-O-Matic Visibility. Using a combination
of Toggle-O-Matic behaviors you can quickly create complex
menus, FAQs, image
galleries and much more, without being locked into any predefined CSS or
code structures. See the Examples section for even more possibilities.
With all Toggle-O-Matic behaviors, the second time you perform the action
(onClick, onMouseOver, etc.) the element returns to its original state. Use
them individually, or combined to create a variety of DHTML effects.
You may apply the Toggle-O-Matic behaviors to any element in the <body>,
including the <body> tag itself. As long as the browser supports the CSS
property for the element, Toggle-O-Matic can toggle it!
Features
- Toggle-O-Matic Class: This extension allows you to toggle the class
of an ID'd element between two distinct classes. This is handy for making a
navigation item "turn on", or changing the color of a table row as
you mouse over it.
- Toggle-O-Matic Display: This extension toggles the display property
of an ID'd element between it's default state and block or none. Here's a quick
breakdown of how Toggle-O-Matic display changes things based on an element's
default state:
- display: inline: Element is toggled between none and inline
- display: block: Element is toggled between none and block
- display: none: Element is toggled between none and the browser's
default state for that element, unless the element is a table-row, then the
table row is set to block or table-row depending on the browser.
- Toggle-O-Matic Visibility: This extension toggles the visibility
property of an ID'd element between hidden and visible or inherit.
- Endless Possibilities: How you implement Toggle-O-Matic
is only limited by your imagination and of course, browser support.
- Custom CSS: You're not locked into using pre-defined CSS,
you get to define the CSS to your coding preferences and naming conventions.