<br />
<br />
<br />
<br />
<style type="text/css">
<!--
/* Hier die Breite anpassen */
#akkordeon {
width: 500px;
overflow: hidden; }
/* Titel Schriftfarbe und Größe + Pfeilgrafik rechts */
#akkordeon h2 {
font-size: 14px;
color: #999999;
background: url() no-repeat right; }
/* Feld um Titel */
.thema {
cursor: pointer;
padding: 5px 10px 5px;
margin-bottom: 5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
/* ausklappbare Feld mit Inhalt */
#akkordeon .inhalt {
display: none;
background-color: #dddddd;
padding: 15px;
margin-bottom: 5px;
overflow: hidden;
border: 1px solid #ffffff; }
/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open { background-color: #999999!important; }
/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {
background: url() no-repeat right; }
-->
</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>
$(document).ready(function() {
$('.top .thema').click(function(){
if($(this).hasClass('closed')) {
$(this).addClass('open').removeClass('closed');
$(this).siblings('.inhalt').slideDown(200);
} else {
$(this).addClass('closed').removeClass('open');
$(this).siblings('.inhalt').slideUp(200);
}
});
});
</script>
<div id="akkordeon">
<div class="top">
<div class="thema closed" style="background-image: url();">
<h2>Inhalt1</h2>
</div>
<div class="inhalt">Inhalt2</div>
</div>
</div>
