Archives

Tag Archives for: ‘javascript’

An ultra-lightweight accordion using jQuery

The following is a jQuery plugin for creating an accordion with independent containers ( they can open or close without effect on the rest of the accordion ). Included is markup to open all or close all at one time.

Special thanks to Tammy Hart and Ben Shoults for their work on this.

DEMO | DOWNLOAD

Size:
Original Size: 1.12KB (493 bytes gzipped)
Compiled Size: 982 bytes (431 bytes gzipped)

Settings:
speed: 200,
showOpen: true,
openId: ‘toggle-all-open’,
showClose: true,
closeId: ‘toggle-all-closed’,
activeClass: ‘ui-state-active’

Usage:

$(document).ready(function(){
	$('.accordion').accordion({ showClose:true, showOpen:true, speed:100 });
});

HTML Markup

<!DOCTYPE html>
<html>
	<head>
		<title>Accordion Demo</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>
		<script src="j/accordion.min.js" type="text/javascript"></script>
		<link href="c/accordion.css" type="text/css" rel="stylesheet" />
		<script>
		$(document).ready(function(){
				$('.accordion').accordion({ showClose:true, showOpen:true, speed:100 });
			});
		</script>
		<style>
		body{
			background:#EEE;
			font-family:Helvetica;
		}
		</style>
	</head>
	<body>
	<h1>Accordion Demo</h1>

	<div class="accordion">
	    <h2>Accordion Header</h2>

	    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

	    <h2>Accordion Header 2</h2>

	    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</div>
	</body>
</html>
123