I’ve put a few examples together to demonstrate.
Pretty much every developer out there who deals with the front-end will have come across collapsing accordion-style lists. They’re in wide use nowadays as they make pages with lots of text look a lot friendlier (for example FAQ pages). Also, people like seeing stuff move around.
But what if you wanted to retain the accordion effect, whilst providing users/clients with direct links to the page with a particular list item expanded?
Click around and notice that the URL in the address bar is changing. If you copy one of the new URLs, like
into a new window, you’ll be taken to the same page with the 3rd section expanded.
Here’s my Sammy / Accordion code, to demonstrate how simple it is to implement.
This one was slightly harder to implement, but still achievable with a bit of hacking around. I couldn’t get the ‘previous’ and ‘next’ options from the Cycle plugin working nicely with Sammy without screwing the transitions up, but I’m sure it’s possible with more work.
Here’s the Sammy slideshow code.
Friendly form wizard
This one is less common, but it’s where my imagination took me after the first two. It’s a single page, Sammy app-powered form wizard.
The stages of the wizard are simply fieldsets hidden/shown appropriately. There’s a simple validation attempt at the end which checks for empty fields and gives helpful links back to any stage that needs to be amended. Once all fields are filled, the submit button appears and Sammy handles the post request. Obviously, performing more complicated validation on page would become unwieldy, but handling it with AJAX is an option.
Here’s my Sammy form code.
Update, 4 Jan 2011
Just thought I’d better say this, since this post is still getting a lot of traffic. While the examples I wrote here are quite useful, Sammy itself has changed quite a lot in the meantime. Please make sure you check the Sammy docs before you give yourself a headache.