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/jque…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>
