Line In List Expander (jQuery)

This is my first jQuery plugin, which is available to Download Here. It comes in both development and minifed flavours (use minified for production sites).

It came from a client project I was working where there were a lot of long lists on one page. It made sense to have only have one of the lists appear at a time and I was using jQuery’s built in slideUp() and slideDown() functions, but opening and closing really long lists would leave you starting at the middle rather than at the top of that particular list.

Kind of annoying.

I wanted a way to keep the animation but have it move the user back to the top of the list.

It is, basically, an accordion plugin (I know: another one, right?) but with a nifty slide to title feature that brings the user’s focus to the top of extremely long lists. You can group lists together to create that accordion effect, or you can have each list acting independently.

It will also search for a link and use the ‘href’ attribute as a target or you can specify a target manually giving you more flexibility.

Installation

It should be safe enough for production sites, but it’s provided ‘as is’ and I’m offering no support for it. It’s released under the MIT license, so feel free to build on it.

To install, download and unzip the plugin then copy either the regular or minifed version into your ‘scripts’ folder. You’ll need jQuery 1.4.2+ for it to run—I recommend using HTML5 Boilerplate‘s script code which downloads it from Google’s CDN before falling back to a local version.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

On the pages you want to use it on, add the following to your footer (just before the closing </body> tag):

<script src='path/to/scripts/jquery.lineinlistexpander.min.js'></script>

Use the example demos below to see how to get it working on your lists.

Demos

Grouped lists

A List (click to show)

• Item 1
• Item 2
• Item 3

A Much Longer List (click to show)

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16
• Item 17
• Item 18
• Item 19

To set this up, use the code below:

HTML

<h4 class='titles' id='my-source'>My Title</h4>
<ul id='my-target' class='group' style='list-style: none;'>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<!-- example with a link (link overrides target set in myOptions, below) -->
<h4 class='titles'><a href='#my-second-target'>My Title</a></h4>
<ul id='my-second-target' class='group' style='list-style: none;'>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

JavaScript

<script>
var myOptions = {
	target 	: 	"#my-target",
	group	:	'.group'
}
$('.titles').LineInListExpander( myOptions );
</script>

Independent Lists

These lists can be opened and closed independently of one another.

Hidden List (click to show)

• Item 1
• Item 2
• Item 3

My Title

• Item 1
• Item 2
• Item 3

To set this up, use the code below:

HTML

<h4 id='independent-source'>My Title</h4>
<ul id='independent-target'  style='list-style: none;'>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<!-- example with a link (link overrides target set in myOptions, below) -->
<h3 id='independent-source-2'><a href='#independent-target-2'>My Title</a></h3>
<ul id='independent-target-2' style='list-style: none;'>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

JavaScript

<script>
// Have to set a target as there's no link.
var independentOptions = {
	target 	: 	"#independent-target"
}
$('#independent-source').LineInListExpander( independentOptions );
// No options required in this case
$('#independent-source-2').LineInListExpander();
</script>

The Future

As it was mostly created for a particular client project, it’s unlikely to get many updates unless I use it for something else (or in the event of sudden and overwhelming popularity).

However, if I get a moment, then future updates may include:

• Ability to turn href searching function off
• Ability to turn scroll to title off
• Set speed of scrollToTop animation
• Ability to let links actually be links on the titles

You can download it here and if you have any questions, you can use the comment form below.