jQuery Plugin For Collapsing Elements with Paper Fold Effect - paperfold.js

paperfold.js is a tiny jQuery plugin that takes advantage of CSS3 transitions and transforms to expand and collapse DOM elements like a folded paper in 3d space.

How it works:

• Every fold is holding two identical divs: top and bottom
• The children divs are positioned relative to it
• The slice grows from zero to 1/n of the elements height (n = number of slices)

See also:

• Paperfold CSS - Fold Elements Like Paper
• Folding Up The DOM Element Like Paper with jQuery oriDomi Plugin

How to use it:

1. Load the required jQuery paperfold stylesheet in the header.

<link rel="stylesheet" type="text/css" href="jquery.paperfold.css"/>

2. Markup Html structure.

<div class="paperfold">

<ol>
<li>
<p>Item 1.</p>
</li>
<li>
<p>Item 2.</p>
</li>
<li>
<p>Item 3.</p>
</li>
<li>
<p>Item 4.</p>
</li>
<li>
<p>Item 5.</p>
</li>

...

</ol>
</div>

3. Create a button to trigger the effect.

<button class="paperfold-toggle">Toggle</button>

4. Include jQuery library and jQuery paperfold.js at the bottom.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.paperfold.js"></script>

5. Initialize the plugin with options.

<script>

$('.paperfold').paperfold({
'toggle': $('.paperfold-toggle'), // trigger selector
'folds': 2 // the number of folds
});

</script>

---

This awesome jQuery plugin is developed by kileras. For more Advanced Usages, please check the demo page or visit the official website.