CSS, HTML und Javascript mit {stil}

jQuery Effekte: Accordion

Javascript jQuery Accordion

Seitdem die Seiten von Apple den Accordion-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 wurde von Jörn Zaefferer realisiert – inzwischen ist der Effekt so populär, dass er kein jQuery-Plugin mehr ist, sondern in den Standard-Umfang von jQuery übernommen wurde.

Aber für den Accordion-Effekt muss die jQuery User Interface Library (jQuery UI) eingebunden werden. Ohne jQuery UI funktioniert der Effekt mit ein paar Zeilen Javascript und jQuery slideToggle() genauso elegant.

  • Kipplaster

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue sit amet lorem malesuada euismod. Nullam neque nibh, tincidunt eget molestie nec, semper sed neque.

  • Inselleben

    Nullam neque nibh, tincidunt eget molestie nec, semper sed neque.

  • Landschaftsgärtner

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue sit amet lorem malesuada euismod.

  • Ballonfahrer

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue sit amet lorem malesuada euismod.

Accordion ohne jQueryUI

Auslöser des Effekts ist ein Klick auf ein h5-Element.

<script src="/jquery.min.js" type="text/javascript"></script>
…
<script type="text/javascript">
$('#drawers').find('h5').click(function(){
    $(this).next().slideToggle();
    $("#drawers div").not($(this).next()).slideUp();
});
</script>

Das Accordion besteht aus einfachen div-Tags mit einem Bild und etwas Text.

<ul id="drawers">
   <li>
      <h5>Kipplaster</h5>
      <div class="first"><img src="laster.gif" alt="" … /> </div>
   </li>
   …
   <li>
      <h5>Ballonfahrer</h5>
      <div><img src="insel.gif" alt="" … /> </div>
   </li>
</ul>

Selbst das CSS für den Effekt ist sparsam.

#drawers div { display:none; }
#drawers div.first { display:block; }

jQuery Slider

Ein großes Plus hat jQuery bei den Plugins aller Art. Da setzen nur zwei drei Zeilen Javascript eine kleine Galerie in Gang und lassen sich auch noch individuell einrichten. Ein Beispiel ist »Unslider«, ein Fliegengewicht mit nur rund 2,6KB.

  • jQuery slideshow 1
  • jQuery slideshow 2
  • jQuery slideshow 3
<div class="slidebox">
   <ul>
      <li><img src="slide1.jpg" width="680" height="360"></li>
      <li><img src="slide2.jpg" width="680" height="360"></li>
      <li><img src="slide3.jpg" width="680" height="360"></li>
   </ul>
</div>

$(function () {
	$('.slidebox').unslider();
});

Unslider – ein responsiver kleiner Slider mit jQuery

Accordion ohne jQuery – CSS Transition

Der Accordion-Effekt funktioniert mit CSS-Transition – ohne jQuery und ohne Javascript. IE9 unterstützt CSS transition noch nicht und es gibt nur wenige CSS-Events, die eine CSS-Transition ohne Javascript und ohne komplizierte Tricks anstoßen können.

Run baby run
monters-little-monsters
»Read the manual, Luke!« Obi Web Kenobi
read-the-manual
This is not Venice
venice

Damit ein Accordion auf ein Click-Event reagiert und auf Touchscreens problemlos funktioniert, müssen komplizierte Tricks aufgefahren werden (z.B. eine Checkbox und eine Pseudoklasse :ckecked).

Einfacher ist die Kombination aus einer Handvoll Javascript-Zeilen und CSS-Transition.

CSS
.vanilla figure { height: 60px;  overflow:hidden; transition: height 1s; }
figure.adown { height: 188px; }
.vanilla figcaption { height: 60px; }
HTML
<div class="vanilla">
   <figure class="adown"><figcaption>Run baby run</figcaption>
      <img src="monsters.png" width="600" height="242" alt="monsters">
   </figure>
   <figure><figcaption>»Read the manual, Luke!« Obi Web Kenobi</figcaption>
      <img src="manual.png" width="600" height="242" alt="read-the-manual">
   </figure>
   <figure><figcaption>This is not Venice</figcaption>
      <img src="venice.png" width="600" height="242" alt="venice">
   </figure>
</div>
Javascript
var figcaption = document.querySelectorAll('.vanilla figcaption');
for (var i=0; i<figcaption.length; i++) {
   figcaption[i].onclick = function () {
      document.querySelector('.adown').classList.toggle('adown')
      this.parentNode.classList.add('adown');
   }
}

Galerie ohne Thumbnails: Slideshow im Text

Noch einmal ein Effekt, der Platz spart: Eine Slideshow im Text. Anstelle der allgegenwärtigen Thumbnails mit Lightbox-Effekt zeigt das Script die Bilder in einer Slideshow ohne die zahllosen Optionen (der neuen Sparsamkeit zuliebe).

Elegant und zeitlos: Teika
The Box mit dem praktischen Tragegriff
Giddy Flash

HTML-Code für die einfache Slideshow:

<div class="sidebyside">
   <div class="slide first">
      <img src="kamera-1.png" alt="" width="580" height="352" />
      <div class="slidealt">Elegant und zeitlos: Teika</div>
   </div>
   <div class="slide">
      <img src="kamera-2.png" alt="" width="580" height="352" />
      <div class="slidealt">The Box mit dem praktischen Tragegriff</div>
   </div>
…
</div>
$('.sidebyside').append('<div class="aline"></div>')
$('.slide').each(function(index){
   $('.aline').html($('.aline').html() + '<div class="trigger">' + parseInt(index+1) + '</div>');
   var imgW = $(this).children('img:first').attr('width');
   var imgH = $(this).children('img:first').attr('height');
   var imgW2 = parseInt(imgW)-60; 
   
   $('.aline').css({'height':imgH + 'px', 'margin-left':imgW2 + 'px'});
   $('.slidealt').css('width',imgW + 'px');
   $('.sidebyside').css('height', parseInt(imgH) +60 + 'px'); 
   $('.trigger').click(function() {
      var pos = parseInt($(this).text());
      $('.trigger').css('background','hsla(0,0%,70%,0.2)')
      $('.slide').css({'opacity':'0',
         'transition': 'opacity 0.5s ease-in'
      });
      $('.slide').eq(parseInt(pos-1)).css({'opacity':'1',
         'transition': 'opacity 0.5s ease-out'
      });
   });
});

Das CSS für die einfache Slideshow

.aline {position: absolute; width: 60px; height: 50px; background: hsla(0,0%,50%,0.2); top: 0;}
.trigger { font-size: 28px; text-align: center; cursor: pointer; padding:15px; color: silver; }
.sidebyside { position: relative; }
.slide { position: absolute; top: 0; opacity: 0; background: gray;}
.first { opacity: 1; }
.slidealt { position: absolute; background: hsla(0,0%,50%,0.5); color: white; }