Elemente aus- und einblenden über jQuery

Jetzt haben wir alle Grundlagen um gezielt Elemente aus- bzw. einblenden zu lassen. Oft hat man Bereiche, die nur zeitweise benötigt werden. Beispielsweise wollen wir einen Bereich für die „Social Bookmarks“ haben, der auf Klick aus- und eingeblendet werden kann. Zum Testen können Sie ganz unten auf dieser Website unsere Social Bookmarks testen und natürlich nutzen – das kann nie schaden und motiviert uns zum Weiterschreiben:).

Dazu nutzen wir einen DIV-Bereich (weil dieser auch i.d.R. hier zum Einsatz kommt). Im folgenden HTML-Code (mit CSS im Kopfbereich, damit besser sichtbar ist, was passiert) haben wir diesen Bereich erstellt.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>jQuery Beispiel: Elemente ausblenden und einblenden</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#socialbookmarksanzeigen {
	background-color: #00CC00;
	padding: 0.4em;
}
#sozialbookmarks {
	background-color: orange;
	padding: 0.4em;
}
</style>
<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
});
</script>
</head>
<body>
<h1>jQuery: Elemente ein- und ausblenden</h1>
<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">
http://www.HTML-Seminar.de</a>
<p id="socialbookmarksanzeigen">
  Weiterempfehlen
  <a href="#" id="sobo-einblenden">einblenden</a>
  <a href="#" id="sobo-ausblenden">ausblenden</a>
</p>
<div id="sozialbookmarks">
  <p><b>Bereich für social bookmarks</b><br>
  Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
  Nicht vergessen, meine Seite zu bookmarken!</p>
</div>
</body>
</html>

Und nun packen wir an die 2 Links die Funktionen zum ein- und ausblenden.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>jQuery Beispiel: Elemente ausblenden und einblenden</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#socialbookmarksanzeigen {
	background-color: #00CC00;
	padding: 0.4em;
}
#sozialbookmarks {
	background-color: orange;
	padding: 0.4em;
}
</style>
<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    $('#sobo-einblenden').click(function(){
    	$('#sozialbookmarks').show();
    })
    $('#sobo-ausblenden').click(function(){
    	$('#sozialbookmarks').hide();
    })
});
</script>
</head>
<body>
<h1>jQuery: Elemente ein- und ausblenden</h1>
<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">
https://www.HTML-Seminar.de</a>
<p id="socialbookmarksanzeigen">
  Weiterempfehlen
  <a href="#" id="sobo-einblenden">einblenden</a>
  <a href="#" id="sobo-ausblenden">ausblenden</a>
</p>
<div id="sozialbookmarks">
  <p><b>Bereich für social bookmarks</b><br>
  Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
  Nicht vergessen, meine Seite zu bookmarken!</p>
</div>
</body>
</html>

Wenn wir von vorneweg den orangen Bereich ausgeblendet haben wollen, geben wir über CSS dem display:none; mit.

Die Geschwindigkeit des Ein- und Ausblendens kann eingestellt werden

Z.B. über:

  • show('slow')
  • show('fast')
  • show(500)

Einfach mal ausprobieren. Allerdings sind 2 Links eigentlich ungeschickt, da ja nur immer einer davon benötigt wird. Daher im nächsten Abschnitt nur 1 Link zum Ein- bzw. Ausblende – je nachdem was gerade benötigt wird.

toggle - nur 1 Link zum Ein- und Ausblenden

Was wir bisher mit 2 Links gemacht haben, wäre sinnvoller mit nur einem Link. Je nachdem ob der Bereich bereits angezeigt wird, wird dieser ausgeblendet oder andersherum.

Genau das machen wir nun. Der Text „Weiterempfehlen“ machen wir zum „toggle-Link“.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>jQuery Beispiel: Elemente ausblenden und einblenden mit 1 Link</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#socialbookmarksanzeigen {
	background-color: #00CC00;
	padding: 0.4em;
}
#sozialbookmarks {
	background-color: orange;
	padding: 0.4em;
}
</style>
<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    $('#sobo-einausblenden').click(function(){
    	$('#sozialbookmarks').toggle('slow');
    })
});
</script>
</head>
<body>
<h1>jQuery: Elemente ein- und ausblenden</h1>
<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">
https://www.HTML-Seminar.de</a>
<p id="socialbookmarksanzeigen">
    <a href="#" id="sobo-einausblenden">Weiterempfehlen</a>
</p>
<div id="sozialbookmarks">
  <p><b>Bereich für social bookmarks</b><br>
  Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
  Nicht vergessen, meine Seite zu bookmarken!</p>
</div>
</body>
</html>

Auch bei der jQuery-Funktion „toggle“ – können wir Übergangszeiten angeben:

  • toggle('slow')
  • toggle(200)
  • toggle('fast')

Interessant wird, wenn nach einer abgeschlossenen Aktion automatisch die nächste folgt. Wie das funktioniert wird im folgenden Tutorial gezeigt.