If you saw any of my previous four blog/short-story template posts from the past week, then you may remember that they preview a truncated amount of content and the user needs to click a “Continue Reading” link to finish the article.

This sort of interaction is pretty familiar, but so too is an expandable cell that lets a user read within the very same page (no jump to a new page!). The trouble is, who wants to wrangle a software engineer into their small template obsession? Well, thank goodness, today I discovered that I could build this expandable cell myself thanks to jQuery accordion!

So, I’ve built another version that is still responsive, and employs the on-page expandable post! Woohoo!

Here is the page, full-width:

The text provided below the Story Title is the first couple of sentences of the story, or a summary of it.

When the reader scrolls to the end of the story, she can click on the story post (either image, title or text area) to expand the post and see the rest of the story:

voila!

She can either leave the story open and select another (multiple accordions can be open simultaneously) or she can close it by clicking the same area as before. This is a possible area for improvement - are people confused about how to close a story? Is that frustrating for them or is it okay because they can still expand other articles?

Now for the mobile view! The jQuery accordion works on mobile - even the animation is smooth and gorgeous:

TOUCH

and the post expands:

Check it out yourself!

http://ravenkeller.com/short-stories-layout-expandable.html

And here’s a link to the jQuery UI collapsible accordion:

jQuery collapsable accordion: http://jqueryui.com/accordion/#collapsible

For those not familiar, paperdolls are figures cut out of paper that come with sets of paper clothing and accessories. The clothing can be attached to the dolls by folded rectangular tabs. 

Over the weekend I took a scan of a cotton paperdoll and turned it into an interactive website that allows you to dress the paperdoll online:

http://ravenkeller.com/paperdoll.html

To make this, I first cut the paperdoll and her accessories out of a jpg scan and turned them into pngs. I then contained each png inside of a DOM element and enabled draggable functionality on them using jQuery UI.

Each DOM element is a div with a unique id and a shared class, “draggable.” Each id specifies a background png with coordinates for the location it will take when the page is first loaded or refreshed. 

The shared class is used to specify “cursor: move” in the CSS. It is also used to enable dragability on all DOM elements containing the “draggable” class. Here’s how the jQuery looks:

  <script>

$(function() {

$( “.draggable” ).draggable();

});

  </script>

SO EASY!