Introduction

Purpose

A fold button is a way to hide or show a section of a document, normally a <DIV> but could be a <IMG> or a <TABLE>. Unlike tabs and accordians there is no need for a group structure as each button is added to a section completely independently of any others. Although it can operatte in 'radio button' mode. For example you might want to have say Terms and conditions normally hidden but easily displayed by clicking on the button.

Use

In the jQuery ready() function target headings before <DIV>s or <DIV>s themselves with something like this: $('div.bar').foldButton();

Example

HTML

jQuery

A plain open/close button to the heading <h2 id=details>Detailed description</h2> <div> The following will use "Part one" from the title in the open button <div class=foo title="Part one"> augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui </div> <br> Unless specified the close button snuggles into the content. <div class=foo title="Part two"> augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui </div> </div>

$(document).ready(function() { Attach inner buttons and take title from div $('div.foo').foldButton({'closedText':'open TITLE' }); Outer button is attached direct to heading with no tweaks $('H2#details').foldButton(); });

This sets up a nest of folds with the outer being attached to a H2 which will target the outer DIV. When closed the heading is still shown.

In this example the inner DIV's title attributes are used to enhance the button titles.

Getting started

Download and unzip the plugin from here
Add these references (as well as jQuery of course) in <head>
<script type="text/javascript" src="foldButton.js"></script> <link href="foldButton.css" rel="stylesheet" type="text/css">
... and get jQuery to apply foldButton() to them.
Test for basic functionality.

Remember you can attach a foldButton to the DIV/IMG/TABLE etc itself or a preceeding heading.

Notes
Have a look at the sources included in the zip
You may want to tweak the CSS for a production system, but when starting you have the benefit of traffic-lights
Now identify your DIVs and any preceeding Hns ...

Something more sophisticated

The basic functionality is err... functional and basic. Let's do more.

Programatically open and close

HTML	jQuery
<span class="button" id="testClose">Close all</span> <span class="button" id="testOpen">Open all</span> (You might want some CSS on the button class.)	Put inside ready() $('span#testClose').click(function(){ $('span#foldButton:visible').foldButton('close'); }); $('span#testOpen').click(function(){ $('span.foldButton:visible').foldButton('open'); });

Button options

Pass none or any combination of these options to the initialisation function. For example $('div.foo').foldButton({'open':true,'closedText':'open TITLE' });

Option	Default	Description
cascadeClose	true	When button is closed any nested buttons are closed also. This doesn't become apparent until re-opening.
cascadeOpen	false	When button is opened should nested buttons also be opened.
closedText	"Open"	Text to display when button is closed. For a compact display simply use + To use the title (see below) here use the key word TITLE which will be replaced by the title text. eg More details of TITLE
compact	true	When true the button in the opened state is snuggled into the body of the target DIV. (This isn't applicable to buttons associated with headings.)
open	false	Initial state
openedText	"Close"	This is the text shown on the button when in the open state.
radioGroup	""	Buttons with the same radioGroup value are exclusive. ie. only one button of the set will be opened at a time.
speed	300	Time to open and close sections in milliseconds. Set to 0 for instant.
title	""	This is used when the mouse hovers over the button in the closed state as an automatic tool-tip. It can be sourced in these three ways (in order of precedence) By specifying a string for this option. By using the title attribute from the target eg <div title="terms and conditions">... By reading the first bit of text from the target DIV. The title can be automatically used in closedText. See above.
titleLength	100	What is the maximum length of title text. Typically when falling-through to reading the opening text of the target DIV

Style

The css (foldButton.css) is simple to edit. Out of the box the open and closed states are highlighted in colour but you probably don't want this in a production system. (Simply comment out the last two lines.) A quick look at the css will be enough to tell you how to alter it whatever way you fancy.

Administration

Version 1.00

Use and abuse as you like

Comments and bug reports to Peter Fox @