Ich arbeite seit Kurzem mit jQuery und versuche Stück für Stück die enormen Möglichkeiten kennenzulernen.

Ziel: 2 „Buttons“, die beim Klick, ohne Reload, versteckte Elemente angezeigen. Einmal indem die CSS Eigenschaft display geändert wird, einmal mit der jQuery slide Animation. Das Ganze wird in Funktionen verpackt die mit Übergabeparametern arbeiten. Letztenendes soll dank toggleClass ein wechselndes Hintergrundbild realisiert werden.
javascript“ line=“1″>
$(document).ready(function() {

$(„#changelog-btn“).click(function(){ BtnCss(„#changelog“); });
$(„#impressum-btn“).click(function(){ BtnSlide(„#impressum“); });

function BtnCss(BtnId) {
if( $(BtnId).css(„display“)==“block“ ) {
$(BtnId).css(„display“, „none“);
} else {
$(BtnId).css(„display“, „block“);
}
$(BtnId+“-btn“).toggleClass(„active-btn“);
}; //BtnImg

function BtnSlide(BtnId) {
$(BtnId).slideToggle(„slow“);
$(BtnId+“-btn“).toggleClass(„active-btn“);
}; //BtnSlide

}); //$(document).ready

html4strict“ line=“1″>

Beispiel

Details:

$(document).ready(function() {

stellt sicher, dass die jQuery Code erst reagiert, wenn das DOM komplett fertig geladen wurde. Damit wird verhinder, dass jQuery auf Elemente zugreift/manipuliert, die noch nicht geladen wurden.
Der Changelog Button fragt beim Klick mit

.css("attribut")

das aktuelle CSS Attribut „display“ der „#changelog“ ID ab und setzt den Wert mit

.css("attribut", "wert")

dann entweder auf none oder block.
Zusätzlich wird mit

.toggleClass

dem Tag eine Klasse, basierend auf den aktuellen Status, hinzugefügt oder entfernt, die das Hintergrundbild des Tags (den Pfeil) ändert.
Mit

.slideToggle

aktiviere ich, je nach aktuellem Status, die slide Animation (

.slideUp, .slideDown

oder

.slideToggle

) für die „#changelog“ ID.
Funktionen sollte klar sein. Sind hier eigentlich unnötig, zeigen aber den generellen Aufbau.