Text Expander Example

by abenrob

HTML

<script src="https://raw.github.com/kswedberg/jquery-expander/master/jquery.expander.js"></script>
<div class="expander">
<p>
<p>Syndicate synergize, customized, content value-added ROI: enable morph embrace syndicate. Technologies transition mission-critical A-list remix communities tag; grow, wikis; communities utilize world-class, syndicate; A-list partnerships synergies eyeballs compelling tagclouds webservices leading-edge syndicate. Revolutionize. Vortals holistic solutions open-source morph, "rss-capable sexy: granular e-services technologies syndicate." Out-of-the-box vertical, "technologies unleash functionalities solutions productize rss-capable whiteboard innovative, schemas; life-hacks," holistic cutting-edge, "utilize, granular clicks-and-mortar." </p>

<p>Networks, redefine transparent intuitive; bandwidth streamline; citizen-media systems. Facilitate cutting-edge, grow synergies engage blogging matrix content interfaces innovative scale. End-to-end bandwidth expedite eyeballs podcasts remix applications e-business incentivize incentivize technologies magnetic, sexy blogging blogospheres standards-compliant seamless. Leverage vortals, "scale," synthesize engineer compelling folksonomies, innovate. Streamline expedite synergies, "dynamic scalable viral strategize e-enable wikis integrateAJAX-enabled architect." Enable impactful end-to-end standards-compliant scale expedite cross-platform platforms addelivery, synthesize communities scalable, frictionless compelling paradigms e-markets global. Wikis web-enabled transparent scale eyeballs scale engineer facilitate harness, B2B iterate, facilitate.</p>
</div>

CSS

.expander{
    width: 90%;
    border:1px solid gray;
    background-color:#99CCFF;
    padding:5px 10px 10px 10px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: small;
    color: gray;
}
.expander a:link, img a:active, img a:visited, img a:hover{
    text-decoration:none;
    color: gray;
}

JavaScript

$(document).ready(function() {
  var opts = {
      //collapseTimer: 4000,
      expandText: '[...]',
      expandPrefix: ' ',
      userCollapseText: '[^^^]',
      userCollapsePrefix: ' ',
      slicePoint: 200,
      preserveWords: true
  };

  $('*.expander').expander(opts);
});