Toggle-O-Matic Visibility

How It Works...

Any ID'd element can have its visibility property toggled with Toggle-O-Matic Visibility. Simply assign an ID to an element, and use this extension to toggle back and forth between the original visiblity state and visible or hidden. For example, you could have:

<p id="myParagraphID">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus diam, bibendum eu, semper sed, lacinia sit amet, tortor. Maecenas viverra enim.</p>

When you apply the extension to change that paragraph's visibility property, essentially the browser treats it like this:

<p id="myParagraphID" style="visiblity: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus diam, bibendum eu, semper sed, lacinia sit amet, tortor. Maecenas viverra enim.</p>

Example: Toggle It!

If you applied Toggle-O-Matic Visibility to a hyperlink, as described in the code examples above it would look like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus diam, bibendum eu, semper sed, lacinia sit amet, tortor. Maecenas viverra enim.

Now every time you click the Toggle It! link, you'll see the paragraph toggle back and forth between its original state (visibility: inherit) and it's opposite (visibility: hidden).