Skip to content
Swipe-to-reveal actions for lists.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Soup up your vanilla HTML list with swipe-to-reveal actions, à la the Gmail app for Android or Twitter for iPhone.

Works with mouse and touch events!

Here's a demo.

Depends on jQuery, Hammer.js, jQuery Easing, jQuery doTimeout, jquery-bridget, and optionally jQuery-Animate-Enhanced.


Install with Bower:

bower install swipe-reveal

Then add code:

<ul class="swipe-reveal">
$(function () {
    revealed: function (el) {
      return '<div> Revealed! </div> <button class="undo"> Undo </button>';

See examples directory for more details.

To programmatically "undo" a reveal on a list item (returning it to default state), use:

var $list = $('.swipe-reveal');
// ...
$list.swipeReveal('undo', listElement);

And to "dismiss" a list item (remove from list), use:

// ...
$list.swipeReveal('dismiss', listElement);


See source code for all options. Here are some important ones:

revealed function ( HTMLElement ) => String: A function returning markup for revealed content. Called for each list element, passed as an argument.

revealThreshold Number (default = 0.33): A value 0-1 representing the minimum distance as a fraction of item list width that drag must be in order to trigger a reveal.

undoSelector String (default = '.undo'): A selector for an element in the revealed markup that triggers an "undo" event to close the reveal.

autoDismiss Boolean (default = true): Whether to automatically remove revealed items if an "undo" isn't requested before dismissTimeout.

dismissTimeout Number (default = 3000): Time until revealed items are automatically dismissed, if autoDismiss is enabled.


MIT. Copyright Anders D. Johnson

You can’t perform that action at this time.