log

August 29, 2010

jQuery Article Expander plugin v1.0

Earlier this week a friend and I discussed using JavaScript to collapse and expand news articles to reduce page loads, so I played with a snippet of code over the weekend and then turned it into a jQuery plugin. It was fun getting my hands dirty with jQuery again — I’d forgotten how concise and beautiful the code can be.

See the demos

Installing and basic usage

Download jQuery and save it into the folder containing your other website files.
Download jquery.articleexpander.1.0.zip and extract the JS & CSS files into the folder above.

Insert the following lines into the <head> section 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() {
        $(".article").articleExpander();
    });
</script>

Change the jquery.js reference in the code above to match your jquery file’s filename.

Write your news articles, blog posts or whatever to use this HTML structure:

<div class="article">
    <h2>Article Heading 1</h2>
    <div>
        <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>
    </div>
</div>

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 plugin. For example, the code below customises the expand and collapse text while making the animation a little faster:

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

The full list of the options

expandText: The text shown in the ‘read more’ button when the article is collapsed.
collapseText: The text shown in the ‘read more’ button when the article is expanded.
headingSelector: The CSS selector used to find the heading element inside the article. The selector is relative to the article element.
contentSelector: The CSS selector used to find the content element inside the article. Note the selector is relative to the article element.
headingClickable: If true, the article heading can be clicked to trigger the expand/collapse.
contentClickable: If true, the article content can be clicked to trigger the expand/collapse. Note this will get in the way of copy/paste operations and possibly links.
speedInMilliseconds: The length of time the animation takes to execute. 1000 milliseconds = 1 second.
cursor: The mouse cursor shown when hovering over clickable headings and content.

A full config example

    <script type="text/javascript">
        $(function() {
            $(".article").articleExpander({
                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'
            });
        });
    </script>

Licensing, feedback and modifications

jQAE is dual licensed under the MIT or GPL Version 2 licenses, like jQuery itself. This leaves your options for re-use pretty open.

Feedback and comments are welcome; patches and improvements even more so! Thanks for your interest.

posted by Andrew

Filed under Personal at 10:19 pm

One Response to “jQuery Article Expander plugin v1.0”

ray wrote:

nice one Andy!

Wednesday, 09.01.2010 at 7:21 am