Frage zu Akkordeon

[Falko]

Hallo liebe leute...

Bin neu hier und um gleich mal ehrlich zu sein hab ich kaum Ahnung.

Habe nach einigem Suche den Code für ein Akkordeon bekommen, habe allerdings ein letztes Anpassungsproblem und hoffe Ihr könnt mir helfen !?

Ich möchte einfach erreichen das immer nur ein teil des Akkordeons offen ist.
Also wenn ich eins anklicke und es sich öffnet....und ich dann das nächste anklicke zum öffnen soll sich das erste schliessen.
Ich hoffe ich konnte hier erklären was ich meine und bitte euch höflich um Hilfe.
Für Euch bestimmt pille palle aber mir würde es sehr helfen...

Vielen Dank schonmal

hier der code

<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;
  -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: #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>

<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>

[Vertreter vom Linksetzer]

Ich möchte einfach erreichen das immer nur ein teil des Akkordeons offen ist.
Also wenn ich eins anklicke und es sich öffnet....und ich dann das nächste anklicke zum öffnen soll sich das erste schliessen.

Das ist auch das Standardverhalten eines Accordions. Informationen und Beispiele findest du bei jQuery, was du ja auch einsetzt.

Ansonsten: Code ist nett, ein Beispiel ist besser! Einfach bei jsfiddle eintragen, speichern, Link posten.

Noch besser ist es, zu verstehen, was man macht.

[Matthias Apsel]

Om nah hoo pez nyeetz, Vertreter vom Linksetzer!

[ ] Ich bin der Vertreter des Vertreters vom Linksetzer
[ ] Ich möchte künftig meine Links tatsächlich ein wenig kommentieren

SCNR

Matthias