In Italiano Accordion significa fisarmonica. E’ un particolare effetto molto gradevole che permette, tramite javascript, di mostrare dei contenuti nascosti.

hor

Proprio come una fisarmonica, al passaggio (o click) del mouse il box interessato si espande mostrando il suo contenuto.

Ecco 10 diversi titpi di accordion adatti a tutte le esigenze

1. MooTools base

il Framework MooTools è uno dei più famosi. Tra le mille funzionalità ti segnalo la demo liberamente scaricabile e configurabile

mootoolsLink

2. jQuery

Jquery è il mio Farmework preferito per quanto riguarda espandibilità e semplicità. Il suo accordion di base risulta molto gradevole

jqueryLink

3. Script.aculo.us Accordion V2.0

Il migliore! Se vi va di usare Script.aculo.us questo è il meglio che ho trovato nelle mie varie ricerche. ottima compatibilità con i browser.

v2Link

4. Accordion in stile Apple.com (basato su jQuery)

ottimo articolo di Html.it per realizzare un perfetto Accordion in linea con quello offerto dal sito Apple.

screenshot

Link

5. Accordion with color transition

Molto semplice e ordinato, nel movimento effettua una transizione cromatica

colorLink

6. Moo.Fx

Molto bello da utilizzare sia con prototype.js or the mootools framework

moofxLink

7. Tab Accordion

Bellissimo effetto a tab basato su Moo.Fx

tabLink

8. Lightweight JavaScript Accordion with CSS

Il più leggero! Solo un Kb testato in Firefox, Internet Explorer, Safari e Opera. utile quando volete un effetto gradevole senza doversi appoggiare ai pesanti framework Javascript.

Link

9. Horizontal JavaScript Accordion 1kb

Anche questo, come il precedente è leggerissimo e non necessita di alcun framework. La differenza è nell’animazione che è orizzontale.

horiz1Link

10. Mootools menu with accordeon and effects

ottimo come menu dinamico sempre basato su Mootools

menuLink

Ecco una lista di altre risorse che potrebbero interessarti:

  1. CSS – Angoli Arrotondati (Rounded Corners)