Ecco un effetto slide per javascript.

Premetto che è una cosa fatta un po’ così, proprio per non rivolgersi a un framework JS.

Dico subito che questo script ha dei limiti e cioè funziona solo con elementi dalla proprietà CSS (dichiarata o nativa non fa differenza) display: block.

Il secondo limite è che per farlo funzionare in modalità di far vedere serve che l’altezza sia fissata (oppure, visto che la fissa, che sia stato chiuso con questa funzione).

L’ho testato su Firefox e Chromium e funziona ma non so dirvi per altri browser.

Comunque da questo script si può anche creare un fade (è proprio da lì che l’ho creato, infatti tempo fa ho fatto uno script simile a bobu) usando opacity al posto di height.

Ma veniamo allo script:

function vdfn_slide(div, mov, timeFrame) {
	timeFrame=typeof(timeFrame)=='undefined' ? 33 : timeFrame;
	if(mov=='show') {
		total=div.style.height;
		onlynumber=total.length>2 ? total.length-2 : total.length;
		onlynumber=total.substr(0, onlynumber)
		timeout=(onlynumber/5+1)*timeFrame;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		div.style.height='0px';
		div.style.display='block';
		slideIteratiion=0;
		slideInterval=window.setInterval(function() {
			newheight=5*slideIteratiion;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.overflow=original_overflow;
			div.style.height=total;
		}, timeout);
	} else {
		total=div.offsetHeight+0;
		timeout=(total/5+1)*timeFrame;
		slideIteratiion=0;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		slideInterval=window.setInterval(function() {
			newheight=total-5*slideIteratiion;
			newheight=newheight<0 ? 0 : newheight;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.display='none';
			div.style.overflow=original_overflow;
			div.style.height=''+total+'px';
		}, timeout);
	}
}

In pratica ogni timeFrame millisecondi aggiunge (o rimuove) 5 px di altezza.

Non ho automatizzato il riconoscimento del far vedere o nascondere ma se proprio lo volete fare deve essere abbastanza facile, più o meno:

mov=div.style.display=='none' ? 'show' : 'hide';

La funzione va chiamata con vdfn_slide(elemento, direzione, timeFrame);.

Il primo parametro è obbligatorio e dice su che elemento deve lavorare (chiamato div nella funzione ma funziona benissimo anche con altri elementi di tipo block, provato di persona). Va benissimo un elemento avuto con document.getElementById.

Il secondo parametro dice se aprire o chiudere. Se specificato show lo mostra, altrimenti, se non avete fatto una patch, lo nasconde.

Il terzo parametro è “avanzato”: serve per dire ogni quanto bisogna modificare l’altezza in millisecondi. Potete benissimo ometterlo. Il valore di default è 33.

Spero vi sia utile, se avete domande o correzioni sono sempre qui.