Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery plugin for displaying much too tall blocks
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
js
.gitattributes
.gitignore
README.md
demo.html
slidable.jquery.json

README.md

jQuery Slidable Plugin

Slidable is an easy-to-use plugin that makes much too tall blocks pretty and handy.

Requirements

Slidable requires jQuery library version 1.7 or higher.

Getting started

To use the plugin, include the jQuery library, the slidable source file and the stylesheet file inside the <head> tag of your HTML document:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/slidable.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/slidable.css" />

Slidable expects a very basic HTML markup structure inside your HTML document:

<div class="slidable">
    <div class="tall">
        <!-- Put plenty of content here -->
    </div>
</div>

To setup Slidable, add the following code inside the <head> tag of your HTML document:

<script type="text/javascript">
    $(function() {
        $('.slidable').slidable({
            // Configuration goes here
        });
    });
</script>

Configuration

Slidable accepts a tiny list of options:

Property Type Default Description
minimal integer 200 Minimal height in pixels for tall blocks
controls array ["Show", "Hide"] Controller text in minimized and maximized state, respectively
speed integer 500 Slide speed in milliseconds
Something went wrong with that request. Please try again.