Expandable List Javascript – jQuery Plugin

Dieses jQuery Plugin wandelt eine mit <ul> erzeugte Liste in eine dynamische Variante um, die man auf und zu klappen kann. Dadurch können sehr große Listen (z.B. verlinkte Tags) mit einigen Einträgen angeteasert und bei Klick auf mehr um die restlichen Einträge erweitert werden. Die Liste ist komplett HTML und somit auch spiderbar. Zudem ist kein zusätzliches CSS für die Darstellung nötig.

Um alle Listen umzuwandeln reicht der folgende Aufruf:

$('ul').expandablelist();

Aus

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  ...
  <li>Item #N</li>
</ul>

wird dadurch:

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li><a href="">more</a></li>
  <li>Item #3</li>
  ...
  <li>Item #N</li>
  <li><a href="">less</a></li>
</ul>

Um eine bestimmte Listen umzuwandeln:

$('#mylist').expandablelist();

Das ist die simpelste Variante. Das Plugin bringt eine Fülle an Konfigurationsmöglichkeiten mit, die auch global gesetzt werden können.

Mögliche Parameter und deren Standardwerte:

Paramater übergeben

$('ul').expandablelist({count:3});

Liste wird bricht ab dem 3. Eintrag um.

$('ul').expandablelist({expanded:true});

Liste wird ausgeklappt angezeigt.

$('ul').expandablelist({moreText:'mehr anzeigen', lessText:'schliessen'});

Liste mit angepassten Button-Texten

Paramater global setzen
Um einen Wert global zu setzen, z.B. den classname für die Links, geht man wie folgt vor. Das muss noch vor dem ersten Aufruf von $().expandablelist(); geschehen.

$.fn.expandablelist.defaults.moreClassA = 'funky';
$.fn.expandablelist.defaults.lessClassA = 'funky';

Links:
Demo
Download minified
Download source