Hallo und guten Morgen,

ich versuche einen Akkordeon Effekt auf einer Seite meiner Homepage einzubinden. Das gelingt auch, aber er verschiebt mir die Seite in der dieser Effekt eingebunden ist.

Den Code hier habe ich in den Eigenschaften der Webseite eingebunden:
<style type="text/css">
<!--

/* Hier die Breite anpassen */
#akkordeon {
width: 500px;
overflow: hidden; }

/* Aussehen Titel */
#akkordeon h2 {
font-size: 14px;
color: #ffffff;
background: url(http://img.webme.com/pic/f/find-templates/rechts.png) no-repeat right; }

/* Feld um Titel */
.thema {
cursor: pointer;
padding: 5px 10px 5px;
margin-bottom: 5px;
transition: all .2s ease-in-out; }

/* ausklappbare Feld mit Inhalt */
#akkordeon .inhalt {
display: none;
background-color: #ffffff;
padding: 15px;
margin-bottom: 5px;
overflow: hidden;
border: 1px solid #c9c9c9; }

/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open { background-color: #6ca02f!important; }

/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {
background: url(http://img.webme.com/pic/f/find-templates/unten.png) no-repeat right; }

-->
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/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>

Den Akordeon Effekt habe ich dann als HTML-Code auf der Seite eingefügt:
<div id="akkordeon">

<div class="top">
<div class="thema closed" style="background: #003030;"> <h2>Hier Titel 1</h2> </div>
<div class="inhalt"> Hier Inhalt 1 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #FFA500;"> <h2>Hier Titel 2</h2> </div>
<div class="inhalt"> Hier Inhalt 2 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #A52A2A;"> <h2>Hier Titel 3</h2> </div>
<div class="inhalt"> Hier Inhalt 3 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #202020;"> <h2>Hier Titel 4</h2> </div>
<div class="inhalt"> Hier Inhalt 4 einfügen </div>
</div>

</div>

Kann mir wer einen Tip geben woran es liegen könnte ?
Vielen Dank vorab und Gruß
Marcus