Slide transitions between html sections using jquery

I needed to make the picture in my head of the interface and workflow for my pet project clojure-blog more concrete.

To split tasks up in multiple steps for the user (not the communication to the server) was essential. The transition Gnome 3 uses in “System Settings” was what I was looking for.

I’ve googled for it several hours only to find complex examples of something the almost did what I wanted.

I finally gave in and started to put something together which I expected to be at least as complex as all the code I had already seen through my search for a solution… it wasn’t :)

The following is some very nice (short and readable) piece of very generic code which uses the new html5 tag section and normal links with internal references to structure the content.

You can demo an example of it here on jsFiddle

Both the html and js is clean… styles for body and h1 can safely be removed together with all css properties defining colors and margin.