Programmieren: Spoiler Effekt

[NantudoMan]

Hey, ich möchte eine kleine Seite aufbauen (hat nix mit stämme zu tun, aber die forumsmitglieder hier sind so intellogent *o*) und sagen wir mal es gibt ne Top50 von irgendwas.

z.b. so wie in diesem Film, da steht "Deutsch", "Mathe", "Englisch".
Wenn ich jetzt auf "Mathe" drücke, gibt es sowas wie einen Spoiler Effekt und die ganze Seite verschiebt sich nach unten.

Naja, einfach den Spoiler, nur nicht mit so nem Button, sondern einem Bild oder einem Text, wie wenn ihr euch die Musik Charts anschaut und dann auf etwas klickt.

Ich kann mich nicht so leicht formulieren, also verzeiht mir
Wer es verstanden hat, bitte helfen Bin nicht so programmierbegabt

Danke.

[Yannici]

Naja, das wird wohl nur mit JavaScript funktionieren.
Ich finde vor allem jQuery sehr hilfreich und wirklich einfach zu verstehen.
Vielleicht nicht ganz so einfach für Programmier-/Scriptanfänger aber immerhin

Mit jQuery "kann man sagen" (so drück ich das jedenfalls gegenüber Scriptanfängern aus), dass wenn auf ein Bereich auf der Seite (oder ein Element auf der Seite) geklickt wird, dann soll etwas passieren.
Was danach passieren soll, kann man dann entscheiden (und da kann man seiner Fantasie wirklich freien Lauf lassen ).

Jedenfalls bin ich ebenfalls nicht so sehr jQuery (bzw. JavaScript) begabt, auch wenn jQuery einfach zu verstehen ist.

Wenn du das mal selbst ausprobieren willst, einfach mal nach einem kleinen JavaScript Tutorial suchen und in die Grundkenntnisse schnuppern.
Danach kannst du dann schon nach einem jQuery Tutorial suchen und dich da durchlesen.

Natürlich brauch man hier auch etwas Kenntnisse in HTML (und am besten etwas CSS).
Wenn ich Zeit hab werde ich mal selbst versuchen ein Spoiler-Effekt (was ich schon einmal gemacht habe, nur nicht finde) für dich zu bauen

Zufällig doch noch was gefunden.
Spoiler-Effekt, wenn auf ein Element mit der ID "yellowtop" geklickt wird.
Und zwar wird das Element mit der ID "box1" (in deinem Fall dann der ausgeblendete Inhalt unter deinem "Mathe"-Element)
ausgeblendet und bei erneutem Klicken wieder eingeblendet

Code:

<script type="text/javascript">
$(document).ready(function(){
    $("#yellowtop").toggle(function(){
        $("#box1").hide(1000);
    }, function(){
        $("#box1").show(1000);
    });
});
</script>

Beispiel auf meiner Website: http://220.22.ohost.de/
Einfach auf den Kopf der gelben Box (da wo "Login" steht) klicken "and see the magic"

so far
Yannici

[NantudoMan]

Vielen dank

yellowtop = Mathe
box1 = einzublendender Inhalt

ok, was muss ich jetzt mit "Mathe" und "Mathe Infos...." machen? Wie zeig ich, dass diese, diesen Elementnamen haben?

PS: Je genau so, wie auf der Seite, nur dass es zu Anfang ausgeblendet sein soll