A jQuery plugin for text that grows on you
HTML JavaScript CSS Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



A jQuery plugin for making text that grows on you

To see this plugin in action, check out andrewcantino.com.


Option 1: Works in IE 9, Chrome, Firefox, Safari.

<!doctype html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <script src='jquery.expando.js'></script>
    <link rel="stylesheet" type="text/css" href="expando.css" media="all" />

      $(function() {

    <div class='about-me'>
      I like to
        <initial><a>program</a> and</initial>
          program, for example in JavaScript and Ruby.  I also like to
          explore the
              hills, valleys, and mountains
          surrounding San Francisco.

Option 2: Works on the above, plus IE 8.

I like to
<span class='expando'>
  <span class='initial'><a>program</a>.</span>
  <span class='expanded'>
    program, for example in JavaScript and Ruby.
    <div class='break'></div>

If you'd like to write in the first format, but deploy in the second (for IE8 support), check out the bin/rewrite.rb script:

bin/rewrite.rb example.html example-processed.html

Expanding line breaks

You can add <div class='break'></div> to create line breaks that expand with their <expanded> block:

I like to
    program, for example in JavaScript and Ruby.
    <div class='break'></div>


Customize colors and spacing with options:

  expansionStartColor: "#EF7A28",
  expansionEndColor: "#444",
  expansionBreakMargin: "25px",
  colorFadeTime: 2000, //ms
  breakOpenTime: 300 //ms

Events and programmatic control

Expanding blocks triggers a jQuery expando.expanded event that you can bind to for custom behavior.

$(".about-me").bind("expando.expanded", function() {
  if (expansionCount > 2) {
    // Hide the explanation dialog
  } else if (expansionCount > 6) {
    // Offer to expand everything

You can programmatically expand an expander by calling expando('expand') on it:

$(".about-me .expander.something").expando('expand')

You can expand everything as well


expando is available over RawGit CDN:

<script src="//cdn.rawgit.com/cantino/expando/38affee59bffdd87975c492472362c69ce0f6fda/jquery.expando.js"></script>