Für Euch bestimmt ein "Klacks"...bitte helft mir

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

  • Danke für die schnelle Antwort und das Beispiel....
    Dein Beispiel hat ja genau die Funktion die ich suche...
    Allerdings ist der Aufbau anders und ich kann mir nicht erklären wie und wo ich Farben anpassen kann.:oops::oops::oops:
    Und bevor ich mir da lange erklären lassen oder euch hier nerve bitte ich höflich darum
    mir meinen Code zu vervollständigen um umzusetzen das immer nur eine Spalte geöffnet ist.


    Oder gibt es einen bestimmten Grund dafür ohne jQuery zu arbeiten?
    Vielen lieben Dank

  • Hallo,


    erstmal nochmal danke für den Tipp zwecks jQuery..


    Ich bin niht an einer Fertiglösung interessiert.
    Mein kleines aber feines Akkordeon ist ja fertig...nur leider fehlt diese eine Funktion :oops:
    Ich denke man muss nur eine zeile einfügen...nur leider weiss ich nicht welche und wo...


    Kannst du mir bitte helfen !?


    Vielen vielen dank schon mal