Hide large HTML content within a clickable "view port"
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Created by James Conroy-Finn.

This plugin is ultimately simple, it takes no arguments and assumes you simply want to have a "view port" hide the contents of a big child until a user clicks on the "view port".


There's a demo at http://jcf.github.com/jquery.expandable. You'll see that clicking on the top-most "view port" causing the "view port" to expand to reveal all of the contents of the first child.

The "view port" below doesn't expand as the height of the contents is less than the height of the "view port".


Wrap your large, element in a DIV...

<div class="view_port">
    <h1>Some content</h1>
      Lorem ipsum dolor sit amet, consectetur magna aliqua. Ut enim ad minim 
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
      velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint 
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
      mollit anim id est mega peng

Define the height for your view port in your CSS and add some optional styles to use when your "view port" is expanded...

.view_port { height: 18px; background-color: #eee; }
.view_port.expanded { background-color: #fff };

Or in your SASS if you're anything like me!

  height: 18px
  background-color: #eee

    background-color: #fff

Then in your JS somewhere call expandable on a jQuery selection...