The small accordion hides long content parts. By click of an toggler the next content (togglerBox) slides down. Clcking an other toggler opens other content and closes the open togglerBox.

Demo

Toggler 1

Squawfish saber-toothed blenny dory Atlantic cod sailfish bonnetmouth gopher rockfish tompot blenny freshwater flyingfish, Pacific lamprey deep sea eel. Sandbar shark shortnose chimaera sandperch sheepshead, parrotfish hammerhead shark gulper eel shark Reef triggerfish snake mudhead. Flabby whalefish deep sea eel--white shark Black scalyfin bigeye sea snail yellow bass. Bull shark; ladyfish, Rasbora, yellowfin cutthroat trout, "bullhead shark tiger shark Alaska blackfish," stoneroller minnow anchovy gray mullet sea chub. Ghost carp: vendace yellow-eye mullet Atlantic trout, "roughy rough pomfret snake mudhead emperor bream bichir chum salmon." Aruana sculpin yellowbanded perch garibaldi wrasse tubeshoulder, jewfish Atlantic silverside rice eel. Halfmoon climbing perch blue danio arrowtooth eel California smoothtongue Long-finned sand diver tui chub. Cardinalfish Black angelfish wallago molly spiny eel earthworm eel lake trout snake eel flagfin bristlenose catfish mahi-mahi. Black scabbardfish, ide Old World rivuline eelpout labyrinth fish flagfin, deepwater flathead shad eel. Capelin chum salmon flagfin speckled trout nurseryfish longnose dace. Tui chub panga platyfish cepalin Mexican golden trout shortnose chimaera Dolly Varden trout ladyfish elephant fish.

Toggler 2

Beaked salmon rough pomfret Sacramento blackfish, swordtail, yellow weaver, squarehead catfish goldfish bigscale fish. Dhufish trench goblin shark ribbon eel creek chub, Pacific cod killifish longfin dragonfish sand goby?"

Toggler 3

Pelagic cod Canthigaster rostrata New Zealand smelt, buri deep sea smelt loach catfish sandfish steelhead, poacher dace pikeperch swamp-eel! Ray telescopefish vendace, glowlight danio--panga smooth dogfish, ghost fish jawfish burrowing goby Indian mul Rainbowfish ballan wrasse. Seamoth, freshwater flyingfish driftwood catfish frogfish scabbard fish. Salmon Atlantic herring gar longnose chimaera Pacific herring longfin round herring. Asian carps cobia needlefish Rattail, hoki bull trout.

Download

Usage

Load the plugin after jQuery libary. You need an selectable HTML root element. Inside this you row toggler and togglerBox after and after.

<!DOCTYPE html>
<html>
<head>
	[...]
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="js/jquery.small.accordion.js"></script>
	[...]
</head>
<body>
	[...]
	<div class="accordion">
		<h2 class="toggler">Toggler 1</h2>
		<div class="togglerBox">
			<!-- CONTENT OF TOGGLERBOX 1 -->
		</div>

		<h2 class="toggler">Toggler 2</h2>
		<div class="togglerBox">
			<!-- CONTENT OF TOGGLERBOX 2 -->
		</div>
	</div>
	[...]
</body>
</html>

Call the Plugin, the usual way in document ready function.

$(document).ready(function(){
  	$(".accordion").accordion();
});

Options

Key Default value Description
firstOpen false Don't close frist togglerBox on load. (Boolean)
fxSpeed 500 Speed of open and clode slide in ms. (Number).
easing false Use jQuery easing for the slide animation. (Boolean)
fxSpeed 800 The fxSpeed defines the speed of scrolling to top. This is specified as a Number and jump to either time in milliseconds. (Number).
fxOpen 'Quad' Easing effect for slide down animation. (String: Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Bounce, Back)
fxClose 'Quad' Easing effect for slide up animation. (String: Quad, Cubic, Quart, Quint, Sine, Expo, Circ)
showInfo false Generates <span> inside toggler with info text. (Boolean)
openInfo 'show more' Info text for closed togglerBoxes. (String)
closeInfo 'show less' Info text for open togglerBox. (String)

Changelog

  • Version 1.4
    • plugin doesn't add IDs by self
  • Version 1.1 - 1.3 - I don't remember
  • Version 1 - final plugin

Licence

The plugin jacc is under MIT licence and GNU licence.
Copyright © 2012 Konrad Rolof