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
- Basic demo: get started here
- Options demo: customising the plugin
- Integrated demo: see it used in a real layout
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: "» Read more",
collapseText: "« 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.
nice one Andy!
Great! But two questions: How can i make the “More” Button push to another place! (example: outside the excerpt div or so) Two: Can i configure the script by height??? (excerpt example 50px) Thanks !
It’s very nice. You can make a wordpress plugin of it?