Ausklappbares Kästchen mit Show-Button [Tutorial]

ACHTUNG! Dieser Code ist eventuell fehlerhaft. Bitte höchstens erst an einem Testblog ausprobieren und erst dann verwenden!
Hey Leute,
Ich hab schon seit einer Weile sehr wenig Zeit um mich um meinen Blog zu kümmern (noch eineinhalb Wochen Schule und die Lehrer müssen einem noch die letzten Test reindrücken - kennt das ja) und deshalb kriegt ihr heute ein kleines aber wirklich feines Tutorial!

Ausklappbares Kästchen "Show"

Das ist doch toll, oder? Falls ihr die farbige Leiste nicht mögt, ich stelle dann später auch die Variante mit der normalen Schriftart zur Verfügung.

ACHTUNG SPOILER!

Meine Damen und Herren, ein Kästchen ins Kästchen setzen ist natürlich auch möglich ;)
Ich sehe in diesen Dingern eine tolle Möglichkeit, Spoiler in einer Rezension zu kennzeichnen. Ich versuche meine immer so spoilerfrei wie möglich zu halten, aber sollte es mal echt nicht anders gehen, werde ich definitiv diese Kästchen verwenden :)

Klappentext zu "Die Raupe Nimmersatt"

Das macht so Spaß, einfach weil man's kann!
Klappentexte könnte man dadurch doch auch platzsparender gestalten, oder? Ein kleiner Nachteil ist jedoch, wenn man mehrere von den Kästchen auf einmal verwendet, behalten sie alle die selbe Farbe, Schriftgröße etc. - aber ich hab euch ja eh gesagt, dass ihr sparsam damit sein sollt :P

Yeahey, dieses supergeniale Klappdings *verschwörerisch zublinzel* ist gar nicht weit verbreitet. Einzeln eingesetzt sieht das wirklich gut aus, ihr seht ja dass 3 auf einmal sehr chaotisch wirken - also bitte auf die Dosis achten ^^ Ein ein paar haben es in meinem letzten Post schon bemerkt und weil es doch einige Interessenten gab, sehe ich keinen Grund, dieses Wissen nicht auch mit euch zu teilen.

<div style="margin: 10px;"><div class="smallfont" style="margin-bottom: 2px;"><h5>DEINE ÜBERSCHRIFT</h5><style>h5 {text-align: center;margin:0.1em 0.1em;font:normal normal 85% Verdana, sans-serif;line-height: 1.10em;text-transform:none;letter-spacing:.1em;color:#fff;background-color: #B0D5FF;}</style>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Show" /></div><div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;"><div style="display: none;">HIER KOMMT DER TEXT REIN DER NACH DEM SHOW ERSCHEINEN SOLL<br /><br />
</div></div></div>

margin: 10px; bestimmt, wie weit die Leiste vom Postrand entfernt sein soll
85% ist die Größe der Schrift
line-height: 1.10em; damit könnt ihr bestimmen, wie Hoch das "Farbige" sein soll; 1.50em; wäre zB etwas breiter
color:#fff; ist die Schriftfarbe; #fff = weiß, #000 = schwarz
background-color: #B0D5FF; ist die Hintergrundfarbe der Leiste, hier bekommt ihr den Code für jede erdenkliche Farbe; WICHTIG: vergesst ja nicht das # und das ;!
font-size: 11px; Schriftgröße im Show-Button 
margin: 0px; ist nur wichtig bei der Variante ohne der Leiste, dazu unten mehr; bestimmt wie weit der Button von der Überschrift entfernt sein soll
width: 45px; die Größe des Buttons; müsst ihr ändern, wenn ihr etwas anderes als 'Show' wollt
"Show" statt Show könnt ihr auch Lies mich etc reinschreiben

Wollt ihr keine farbige Leiste, wie ich es in den Beispielen oben angewandt habe, löscht ihr <h5>, </h5> und alles von <style> bis </style>. Ihr könnt die Überschrift danach im Verfassen-Modus ganz gewöhnlich herrichten, wie ihr wollt. 
Mir persönlich gefällt die Variante mit der Leiste zwar ein bisschen besser, es kommt allerdings auf die Verwendung an. Die Leiste hat jedoch auch einen Nachteil: benutzt ihr den Code zB mal mit der Farbe Rot, und ihr wollt den Code ein paar Wochen später in einem anderen Post mit der Farbe Gelb könnt ihr noch so viel herumgelben wie ihr wollt, sie wird rot bleiben. Also: pro Blog nur ein Leistenstyle, schade! Deswegen kann ich euch die Variante ohne Leiste mehr empfehlen, muss aber jeder für sich selbst entscheiden.
Dafür gibt es bestimmt eine mehr oder weniger komplizierte Lösung aber ich benutze den Code nicht oft genug, um danach zu suchen. 

Copyright, Urheberrecht, blablablub liegen nicht bei mir, solche Sachen darf jeder nutzen, der will. Falls ich euch helfen konnte, freut mich das. Falls es noch Fragen gibt, versuche ich mein Bestes, sie euch in den Kommentaren zu beantworten. :)