August 29, 2010

jQuery Article Expander plugin v1.0

Ear­li­er this week a friend and I dis­cussed using JavaScript to col­lapse and expand news arti­cles to reduce page loads, so I played with a snip­pet of code over the week­end and then turned it into a jQuery plu­g­in. It was fun get­ting my hands dirty with jQuery again — I’d for­got­ten how con­cise and beau­ti­ful the code can be.

See the demos

Installing and basic usage

  1. Down­load jQuery and save it into the fold­er con­tain­ing your oth­er web­site files.
  2. Down­load jquery.articleexpander.1.0.zip and extract the JS & CSS files into the fold­er above.
  3. Insert the fol­low­ing lines into the <head> sec­tion of your HTML file:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.articleexpander.1.0.minified.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.articleexpander.1.0.css">
    <script type="text/javascript">
        $(function() {
  4. Change the jquery.js ref­er­ence in the code above to match your jquery file’s filename.
  5. Write your news arti­cles, blog posts or what­ev­er to use this HTML structure:
    <div class="article">
        <h2>Article Heading 1</h2>
            <p>The first line of your article content.</strong></p>
            <p>The second line of your article content.</strong></p>
            <p>The nth line of your article content.</strong></p>
  6. See if it works :)

Changing options and using different HTML structures

Like most jQuery addons, this one lets you change options with a JS object passed to the plu­g­in. For exam­ple, the code below cus­tomis­es the expand and col­lapse text while mak­ing the ani­ma­tion a lit­tle faster:

    <script type="text/javascript">
        $(function() {
               expandText: "See more",
               collapseText: "See less",
               speedInMilliseconds: 1000

The full list of the options

The text shown in the ‘read more’ but­ton when the arti­cle is collapsed.
The text shown in the ‘read more’ but­ton when the arti­cle is expanded.
The CSS selec­tor used to find the head­ing ele­ment inside the arti­cle. The selec­tor is rel­a­tive to the arti­cle element.
The CSS selec­tor used to find the con­tent ele­ment inside the arti­cle. Note the selec­tor is rel­a­tive to the arti­cle element.
If true, the arti­cle head­ing can be clicked to trig­ger the expand/collapse.
If true, the arti­cle con­tent can be clicked to trig­ger the expand/collapse. Note this will get in the way of copy/paste oper­a­tions and pos­si­bly links.
The length of time the ani­ma­tion takes to exe­cute. 1000 mil­lisec­onds = 1 second.
The mouse cur­sor shown when hov­er­ing over click­able head­ings and content.

A full config example

    <script type="text/javascript">
        $(function() {
                expandText: "&raquo; Read more",
                collapseText: "&laquo; Collapse article",
                headingSelector: "> div gt; :first-child",
                contentSelector: "> div gt; div",
                headingClickable: true,
                contentClickable: true,
                speedInMilliseconds: 300,
                cursor: 'pointer'

Licensing, feedback and modifications

jQAE is dual licensed under the MIT or GPL Ver­sion 2 licens­es, like jQuery itself. This leaves your options for re-use pret­ty open.

Feed­back and com­ments are wel­come; patch­es and improve­ments even more so! Thanks for your interest.

posted by Andrew

3 thoughts on “jQuery Article Expander plugin v1.0

  1. ray says:

    nice one Andy!

  2. Mark Greiser says:

    Great! But two ques­tions: How can i make the “More” But­ton push to anoth­er place! (exam­ple: out­side the excerpt div or so) Two: Can i con­fig­ure the script by height??? (excerpt exam­ple 50px) Thanks !

  3. Nicola Sergio Francesco Pevere says:

    It’s very nice. You can make a word­press plu­g­in of it?

Leave a Reply

Your email address will not be published. Required fields are marked *