divShow.js

Description:

- Code to create animation to show or hide an element in javascript.

- JS of 3Ko and doesn't use external libraries (like Jquery).

- Compatibility: all browsers W3C, IE>=6.

- Download the code here (licence CC by)

Declaration:


divShow.add ('id1', boolean 'id2', "innerHTML1", "innerHTML2", time);

id1: Element id to hide/show. The attribute style is created or replaced by: style = "overflow:hidden; height:0/auto; display:block;" (class are available).

boolean: (optional) true: id1 start visible, false: id1 start hidden. (default = false).

id2: (optional) Element id which role is to hide/show id1. The attribute style is created or replaced by: style = "" (class are available).

innerHTML1: (optional) Content id2 when id1 hidden.

innerHTML2: (optional) Content id2 when id1 visible.

time: (optional) Animation time in millisecond (default = 700).

Call:


divShow.start('id1', boolean);

id1: Hidden/shown element id.

boolean: (optional) true: the function is called only to show id1, false: the function is called only to hide id1.

Example:


<script type="text/javascript" src="divShow.js"></script>
<script type="text/javascript">
	window.onload = function () {
		divShow.add ('myDiv', false, 'myButton', "Show", "Hide", 700);
	}
</script>

<button id="myButton" style="display: none;" onclick="divShow.start('myDiv');"></button>

<div id="myDiv">
	<p>Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.</p>
</div>

<-- id="myButton" onclick="divShow.start('myDiv'); style="display: none;" (button no display if no JS)

id="myDiv"

Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

Example with a animation in 1.5s:


divShow.add ('myDiv2', false, 'myLink', "", "", 1500);

id="myDiv2"

Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.

Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.

Menu example:


<script type="text/javascript" src="divShow.js"></script>
<script type="text/javascript">
	window.onload = function () {
		divShow.add ('menu1', true);
		divShow.add ('menu2');
		divShow.add ('menu3');
	}
</script>

<div onclick="divShow.start('menu1');divShow.start('menu2', false);divShow.start('menu3', false);">menu1</div>
<div id="menu1">
	<p>Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.</p>
</div>

<div onclick="divShow.start('menu2');divShow.start('menu1', false);divShow.start('menu3', false);">menu2</div>
<div id="menu2">
	<p>Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere. Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur; qui hac opinione non modo verbis sed etiam opere levandi sunt.</p>
</div>

<div onclick="divShow.start('menu3');divShow.start('menu1', false);divShow.start('menu2', false);">menu3</div>
<div id="menu3">
	<p>Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.</p>
</div>
menu1
menu2
menu3

Examples with auto-declaration

If you don't declare the function with "divShow.add", the function "divShow.start" will detect the height of the div, and choose to hide it or show it accordingly.


<div onclick="divShow.start('div3');>


<div onclick="divShow.start('div4');>

id="div4"

Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere. Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur; qui hac opinione non modo verbis sed etiam opere levandi sunt.