A simple vertical jQuery accordion with much room for growth. In future version I would like to use a few additional lines of JS to create a cleaner structure but even if only as an example this is a good start. I made a horizontal accordion as well but all things will be made public in due time.

This script creates a cooking and remembers which section was last opened therefore making it a great homepage piece or miniature site navigation.

Cheers!

Why would you use jQuery instead of (insert name of your favorite script library)?
I prefer jQuery to most other script libraries as it can be used for everything you’d need. It may be a bit heavier (20k compressed) but the cross browser support is fantastic. Plus if 20k in javascript is too heavy for your site, you should probably revise your page assets (images, flash, inline scripting, etc). Enough ranting here are some examples of this plugin in action.

Text link examples:

Alex and her purposely blurred roommate | Oh many a night we play around the halls of Goathill Tavern | Lindsey at Goathill

Image link examples:

Release Notes and Download

As this was made in one afternoon and made for fun the image set is for any image links on the page (I will fix this later) In the download package just drag and drop the folder into your wordpress plugins folder and that should take care of it.

download without jQuery included
download with jQuery included

If you use it please credit me somewhere and/or leave a comment here! Please don’t directly link to my script!

UPDATE: further development has ceased on this project as since its inception there have been great advances by other developers offering a standalone and WordPress plugin that works fantastically! Check out Lytebox (standalone) or WP-Lytebox (WordPress Plugin for version 1.5+)

• An open letter to the Anaheimer who posted on Ottawa R&R
• I spilled grandma on you around spadian station
• To my Ex-GF’s Cat

Pushed out two comps one I played around with floating left the navigation at different heights and floating right an accessible search right under the navigation. There’s even room to add image replacement for hover effects on the navbar but I’m pretty sure the more traditional layout will win out with the client. So have at it and view the one I played with that won’t be chosen. Also, here is the standard layout that I haven’t coded yet as it’s fairly straight forward.

If you are having any CSS issues feel free to contact me and I might help you out and write something about the issue/solution on here. I was debating writing something about floats, clears, alignment, fluid layouts and lucky charms. The last bit there means I need lunch or a big bag of marshmallows.

Technorati Profile

Currently it seems IE 4 is the only browser to support(please correct me if I am wrong). The W3C has great intentions but like any bureaucratic endeavor CSS3 will require much paperwork/revisions/coffee as it carries enormous changes.

Andy Budd posted an article about CSS2.2:

“Bert Bos and Hakon Lie postulated that CSS3 would arrive sometime in late 1999.

Over 7 years later, and we’re still waiting. This begs the question, what went wrong?

I agree, when will see something done? If they don’t get up soon enough we might be forced into some serious javascript work arounds involving and extended version of something sIFR-like.

Here it goes:

the css

a#skipAhead {
	display: inline; position:absolute; top:0; left:0;
	width:10%; z-index:1000;
	filter:alpha(opacity=0); -moz-opacity:0.0; opacity:0.0;
}
/* accesibility for skipper aka skipAhead from comments by
patrick h. lauke aka redux@splintered.co.uk */
a#skipAhead:focus,a#skipAhead:hover,a#skipAhead:active {
	filter:alpha(opacity=0.85); -moz-opacity:0.85; opacity:0.85;
	border-bottom:1px solid #023845; border-right:1px solid #023845; background:#0E4E70;
	color:#fff; font-weight: bold; text-align: center; padding: 5px;
}

the html

[a href="#yourMom" title="Skip to the content" id="skipAhead"]skip to content[/a]

[a name="yourMom" title="yourMom"][/a]

some info

by placing the triggering anchor tag right after the body tag as this is a feature for accessibility we allow the user to skip flashy navigation and other page elements and get to the guts of the page.

updated

Many thanks to Patrick H. Lauke