[JavaScript] div-Container ein-/ausklappen ✤✤

Puh. Post Nummer 1oo. Richtig krass, dass es schon so viele sind *nostalgischwerd*...
Joa, anlässlich dieses Posts habe ich jetzt mal was ganz Neues, ein Tutorial von etwas, von dem ich eigentlich überhaupt keine Ahnung habe. Javascript.
Mithilfe von Javascripts kriegt man extrem tolle Dinge hin wie beispielsweise irgendwelche Animationen oder wasweissich nicht alles.
Ich bin einfach immer wieder restlos begeistert, wenn man mir irgendetwas mit Java erklärt. Und auch wenn ich es bisher noch nicht schreiben kann, bin ich mittlerweile in der Lage so ungefähr zu verstehen, was ein Javascript so sagt.
Ich muss dabei immer an Excell denken...
Öhm ja, ich wollt ja ein Tut schreiben.
Also.
Wie gesagt, ich kann so ein Script nicht selbst schreiben, aber dieses hab ich ganz alleine verstanden, was mit wahnsinnig stolz macht. Und weil ich nur das Script gefunden habe (man frage mich nicht wo, ich habe unzählige Foren durchforstet, darum gibt's leider keinen Link) aber keine deutsche Anleitung sondern nur bruchstückiges Englisch habe ich beschlossen das hier zu schreiben.
Und Gott, ich komm heut auch nicht zum Punkt. Liegt an dieser dreistelligen Zahl, die mich leicht verwirrt. Der Blog wird gross... *räusper*
Zurück zum Punkt.
Jeder der jetzt auf weiter klickt, wird es nicht bereuen, denn dann geht der Post richtig los. Versprochen.
Okay, vielleicht habt ihr schon gesehen, dass wenn ihr in der Sidebar auf Follow klickt, eine Liste aufklappt, oder das DropDown einer gemeinsamen Tutorialseite gewichen ist, mit aufklappbaren Tutoriallisten.
Das ist das Javascript, das ich euch heute vorstellen möchte. Und zwar anhand dieses Beispiels:

*ein-/ausblenden*

So wird dieser Button gemacht

Ich bin etwas Text
ein Link (zur Homepage)

Ein Listenpunkt

Darf's auch ein Bild sein?

Dann klick mich!

Okay. Eine Klappe in der Klappe. Kein Problem, aber ich mag Schachteln ^^
Zu Beginn, die ganze CSS für den Button und all das habe ich in der Klappe schon verlinkt, das erkläre ich nicht noch extra.
Nun aber zum Vorgehen.
Bevor ihr Javascripts verwenden könnt, müsst ihr jQuery in euer Blog einfügen.
Geht also auf "HTML bearbeiten" und sucht
</head>
Direkt oberhalb davon kopiert ihr nun diesen Code:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script>

Oberhalb davon kopiert ihr das Javascript, welches die Klappfunktion möglich macht.
Ihr könnt diesen Code auch in ein HTML-Gadget einfügen, aber ich hab's lieber im Code integriert.
<script type='text/javascript'> function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == &quot;none&quot;){
elem.style.display = &quot;block&quot;;
}else{elem.style.display = &quot;none&quot;;}}</script>
Dieser Code sagt, dass ein div-Container mit einer bestimmten id (die dem toggle gegeben wird) und der Definition: display:none; zu dem Zeitpunkt angezeigt werden soll, wenn man den Link klickt (So ungefähr jedenfalls)

Nun zur Anwendung.
Die schaut ganz einfach aus:
<a href="javascript:toggle('ID')"> Klapplink </a>
<div id="ID" style="display: none;"> Verborgener Inhalt </div>

Zuerst habt ihr also den Link mit diesem toggle, dem ihr die ID des Containers gebt, der aufgeklappt werden soll, wenn man draufklickt.
Darunter (oder wo auch immer ihr wollt) habt ihr den Container, der die ID trägt, die dem toggle gegeben wird und das style-Attribut display:none; Und das ist schon alles, das ist die ganze Zauberei.

In diesen Container könnt ihr dann alles reinpacken, was ihr wollt. Buttons, Text, Listen, Links, Bilder, andere Klappen.

Joa, und das war's dann eigentlich auch schon für dieses Script. Ich hoffe es hat irgendjemandem was geholfen.

Oh und wer will kann sich hier noch den Code für die obere Schachtel angucken.
einblenden


<div id="button">
<a href="javascript:toggle('example')"> *ein-/ausblenden* </a></div>
<div id="example" style="display: none;">

<div id="button">
<a href="http://bekreatief.blogspot.ch/2012/06/css-buttons.html" target="_blank"> So wird dieser Button gemacht </a></div>

Ich bin etwas Text
<a href="http://bekreatief.blogspot.ch/" target="_blank"> ein Link (zur Homepage) </a>
<li>Ein Listenpunkt</li>

Darf's auch ein Bild sein?<div id="button">
<a href="javascript:toggle('inside')">Dann klick mich!</a></div>

<div id="inside" style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-b7HQEeFB3uk/UBmh9NIdPfI/AAAAAAAACwg/GG4bb1kiS_E/s1600/Bloody%2BBlossom_Post-Work.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://1.bp.blogspot.com/-b7HQEeFB3uk/UBmh9NIdPfI/AAAAAAAACwg/GG4bb1kiS_E/s400/Bloody%2BBlossom_Post-Work.png" width="400" /></a></div>
</div>
</div>