A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign Responsive Images, Transitions & Javascript jQuery: Elemente ein- & ausblenden 2


jQuery: Elemente ein- & ausblenden 2

HTML

<!-- HTML-Ausschnitt -->
<h2>Daten und Fakten</h2>
<div class="mehrInfo">
    <p>Venedig resp. venezianisch Venexia…</p>
</div>

Javascript

$(function(){
  //alle "div.mehrInfo"-Blöcke unsichtbarmachen
  $('div.mehrInfo').hide();

  //beim Klicken auf die "h2" geschieht dann folgendes
  $('h2').click(function(){
    //der "div.mehrInfo"-block, der sich direkt nach der
    //angeklickten "h2" befindet, wird sichtbar gemacht
    $(this).next('div.mehrInfo').slideDown('slow');
  });
});

Online-Demo

Hier die Demo dazu – und das komplette Paket zum Download und Anpassen …