Ramin Hossaini's Blog

27Apr/10

jQuery.collapsible plugin

Note: This plug-in is no longer being maintained and is provided as is.

Introduction

I wrote my first jQuery plugin today and figured other people might find it useful too.

The plugin adds expand/collapse functionality to divs and also saves the state using the jQuery cookie plugin

Changelog

  • 15 Jun 2010
    • You can now specify that a module's default state is collapsed by adding 'collapsed' to the class. For more information, look at the example given below.
  • 04 May 2010
    • Changed expand/collapse icons to sprite
    • Can now have multiple groups of collapsible boxes by giving each
      a descriptive identifier
  • 27 Apr 2010
    • First release

Demo

Click here for a demo

Download

Download Latest Version (jquery.collapsible.latest.zip)

Setup

Add includes to the head-section:

1
2
3
4

<script type='text/javascript' src="./js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="./js/jquery.cookie.js"></script>
<script type='text/javascript' src="./js/jquery.collapsible.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/demo.css" />

Add the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="module"> <!-- only important for styling -->
	<div class="header"> <!-- must have a class name -->
		<h1>Header #1</h1>
	</div>
	<div class="content"> <!-- the 'content' class is only for styling -->
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header collapsed"> <!-- this will be collapsed by default (unless the cookie says otherwise) -->
		<h1>Header #2</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header">
		<h1>Header #3</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>

Initialize the Javascript:

1
2
3
4
5

<script type='text/javascript'>
$(document).ready(function() {
	$.collapsible(".module .header");
});
</script>
Tagged as: , , 8 Comments
Page 1 of 11

Pages

Categories

Bear