Einfaches slideToggle mit jQuery
HTML
<button id="btn1">Klick mich</button>
<div class="box">
<h3>Überschrift</h3>
<p>Hier ist toller Inhalt drin</p>
</div>
<button id="btn2">Absatz zusammenfalten</button>
<p id="p2">Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres </p>
CSS
body{ padding: 40px;}
.box {
margin-top: 40px;
border: 1px solid #444;
padding: 10px;
}
button { margin: 20px 0 0 0;}
#p2 {background: #cecece}
JavaScript
$("#btn1").click(function(){
$('.box').slideToggle("slow");
});
$("#btn2").click(function(){
$('#p2').slideToggle("slow");
});
// Durch die Hintergrundfarbe wird klar,
// dass der Absatz beim Auseinanderfalten leicht sprigt.