This old code was literally a 5-minute fix to a problem a friend was having on his website. He wanted a lightweight option for an expanding blind that would reveal "hidden" content. It was literally written and posted via my Nokia E72 (back when they were cutting-edge) while I was a passenger in a car.

There are a lot of JavaScript libraries that'll render flashy blind animations and provide lots of glossy features. These options, however, come at the expense of page-load time, compatibility, and often have a number of dependencies. What you'll find on this page is extremely simple in comparison.

Contrary to best practice, we don't print the JavaScript and CSS into the head of the document as we should. However, this inline CSS and JS avoids callback options (so the JS and CSS won't load on every page). That said, we do scope the CSS which is becoming a more accepted means of inline CSS.

We've just revisited this code ourselves because we want to print the change log under each download. Rather than display it by default we'll provide an opening and closing blind for those that are interested. Consistent with our new mantra of simple design, this shortcode feature more than meets our needs.

Example:

Shortcode used is in the following format: [blind text="Add Your Link Text Here"]Your Content is here (wrapped in <strong>blind</strong> tags).[/blind].

The text attribute is optional. If you have default link text, you only need to use the opening and closing blind tags.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

Code Removed. Updated here.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Considerations

• We're looking forward to revisiting this in the future in an attempt to clean it up and make it a little fancy.
• The plugin below displays JS and CSS inline. The operation of checking for the shortcode in the post text (to determine if we load the CSS and JS) was more expensive than just serving it.
• While multiple instances of the blind may be used on the same page, it's a bad terrible idea. To avoid the CSS and JS loading for each blind, copy the relevant code into your custom functions file. We wrote it so we could use it once on every page.

Download