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.

  • Kipplaster
    Accordion 1

    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
    Accordion 2

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

  • Landschaftsgärtner
    Accordion 3

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

jQuery Accordion

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; }

Accordion ohne jQuery

CSS transition und ein paar Zeilen Vanilla Javascript setzen heute den Accordion-Effekt ebenso gut in Gang, wenn die ganz alten Browser keine Rolle mehr spielen (CSS transition: ab IE10).

Es gibt nur wenige CSS-Events, die eine CSS-Transition ohne Javascript und aufwändige Tricks anstoßen können. Ein paar Zeilen Javascript setzen die Transition bei einem Mausklick durch eine zusätzliche CSS-Klasse in Gang.

Suspendisse potenti

acco-books-3

Nullam risus dui, consectetur quis ullamcorper suscipit, facilisis a quam. Suspendisse potenti.

Cras ut elit

acco-paper-3

Etiam tincidunt dui est. Nam quis nulla quis neque efficitur rhoncus. Cras ut elit mattis, hendrerit orci a, varius lorem. Nullam finibus consequat dignissim. Suspendisse potenti. Suspendisse nec odio accumsan, vehicula nulla et, varius erat.

Donec ultricies

acco-spices-3

Donec ultricies sem sit amet ultricies venenatis.

<h4>Donec ultricies</h4>
<div class="row">
   <img src="spices.jpg" width="980" height="511" alt="spices">
   <p>Donec ultricies sem sit amet ultricies venenatis.</p>
</div>

Der Platz für die Elemente des Accordions darf unterschiedlich hoch sein. CSS transition agiert hier nicht auf height, sondern auf max-height. Wenn der Inhalt kürzer als die Höhe des Blocks bleibt, verhalten sich Blöcke mit min-height und height gleich.

.row { 
   max-height: 0;
   overflow:hidden;
   transition: max-height 1s; 
}
.acctoggle { 
   max-height: 800px;
   height: auto;
}

Der Trick mit max-height und height:auto bringt die drei Zeilen der Animation auf die passende Höhe. Zu beachten ins allenfalls, dass sich die Dauer der Animation nicht nach height, sondern nach max-height richtet.

<script>
(function(){
   var row = document.querySelectorAll (".row");
   var h4 = document.querySelectorAll (".acc h4");
   var len = h4.length;
   for (var i=0; i<len; i++) {
      h4[i].onclick = function () {
         for (var j=0; j<len; j++) {
            row[j].classList.remove("acctoggle"); 
         }
         this.nextElementSibling.classList.add("acctoggle");
      }
   }
})();
</script>

jQuery Slider

Ein großes Plus hat jQuery bei Slideshows aller Art. Hier setzen nur drei Zeilen Javascript die Galerie in Gang und lassen sich dabei 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

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'});
  $('.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

.trigger {display: none} 

@media (min-width: 600px) {
  .aline { position: absolute; width: 60px; height: 50px; top: 0; }
  .trigger { display: block; font-size: 28px; }
  .sidebyside { position: relative; }
  .slide { position: absolute; top: 0; opacity: 0; }
  .first { opacity: 1; }
  .slidealt { position: absolute; }
}

Accordion und Slider – Responsive?

Auf kleinen Monitoren sind Accordion-Effekte nicht immer benutzerfreundlich und steuern wenig zur Benutzererfahrung bei. Javascript matchMedia ist das Äquivalent zu CSS Media Queries.

matchMedia wird von den modernen Browsern und von IE ab IE10 unterstützt.

/** Javascript Media Query **/
var mql = window.matchMedia("screen and (min-width:600px)");

/** Beim Laden der Seite initialisieren **/
tabbedGallery(mql);

/** Ein spezieller Event Listener für matchMedia **/
mql.addListener(tabbedGallery);

function tabbedGallery (mql) {
   if (mql.matches) {
      … 
   }
}