Methode slideToggle in jQuery
Die nächste Methode -
slideToggle
funktioniert wie folgt: Wenn ein Element ausgeblendet ist - wird es eingeblendet,
und wenn es eingeblendet ist - wird es ausgeblendet. Der Vorteil
dieser Methode besteht darin, dass alles auf eine Schaltfläche
gelegt werden kann, und nicht auf zwei, wie es in
den vorherigen Lektionen der Fall war.
Betrachten wir das folgende Beispiel. Nehmen wir an, unser HTML-Code sieht so aus:
<button id="toggle">click me</button>
<div id="elem">text...</div>
Es gibt auch CSS:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Schreiben wir nun den Code, damit bei einem Klick auf eine Schaltfläche das Element mal ausgeblendet und mal eingeblendet wird:
$('#toggle').click(function() {
$('#elem').slideToggle(1000);
});
