Stil mit {stil}

Okt 2008

jQuery-Plugins und Erweiterungen: Accordion

Seitdem die Seiten von Apple den Accordeon-Effekt das erste Mal präsentierte, ist der Fahrstuhl-Effekt in der Navigation populär. Der Effekt bietet nicht nur eine interessante Optik – er spart Platz und macht eine lange Navigation übersichtlich.

Das Accordion-Plugin für jQuery von Jörn Zaefferer realisiert diesen Effekt mit wenigen Zeilen Javascript.

Zusätzlich zur jQuery-Library muss das Accordion-Script eingebunden werden.

<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.accordion.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
   $('ul#drawers').accordion({
      header: '.handle h3',
      event: 'mouseover'
   });
});
</script>

<ul id="drawers">
   <li class="handle first"><h3>Kipplaster</h3>
      <div>
         <img … />
         <p>Und dann folgt noch ein kleiner Text … </p>
      </div>
   </li>
   <li class="handle mitte"><h3>Inselleben</h3>
      <div>
         <img … />
         <p>Und dann folgt noch ein kleiner Text …</p>
      </div>
   </li>
   …
   <li class="last"> </li>
</ul>