Verschiedene Div-Container mit Javascript einblenden

  • Hallo, ich stehe gerade ein wenig auf dem Schlauch. Ich versuche gerade über ein Javascript eine Reihe von Div-Containern einblenden zu lassen. Momentan funktioniert das soweit schonmal halbwegs. Momentan werden die Divs untereinander angezeigt. Sie sollen aber immer an der selben Stelle eingeblendet werden. Ich hätte es gerne so, dass wenn ich den einen Inhalt anklicke der andere Inhalt wieder verschwindet.

    Zum besseren Verständnis hab ich mal den Code beigefügt. Ich hoffe, dass mir hier jemand helfen kann:) Danke im Voraus!


    <script>
    function show(id) {
    if(document.getElementById) {
    var mydiv = document.getElementById(id);
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
    }
    }
    </script>

    <a href="" class="button blue animate6" onclick="javascript:show('item img1 active');return false" data-animate="fadeIn">Inhalt1</a>
    <a href="" class="button blue animate6" onclick="javascript:show('item img2 active'); return false" data-animate="fadeIn">Inhalt2</a>
    <a href="" class="button blue animate6" onclick="javascript:show('item img3 active'); return false" data-animate="fadeIn">Inhalt3</a>

  • Du hast keinen div-Container sondern Links. Die musst Du per CSS ja schon entsprechend gestalten damit sie als Blockelemente wirken. Per CSS kannst Du auch dem umgebenden Element dieser Links ein "position: relative;" geben und dann die Links jeweils mit "position: absolute" positionieren. So liegen sie alle übereinander und dein JavaScript kann sie an der selben Stelle ein- und ausblenden.

  • Hallo threadi, Danke für deine schnelle Antwort. Sorry, ich hab schon div-container aber halt mit einer id (<div class="item img1 active" style="display: none" id="item img1 active">Angezeigter Inhalt</div>). Hab es jetzt so hinbekommen, dass alle übereinander angezeigt werden... Die funktion im Javascript funktioniert derzeitig so, dass der Inhalt beim ersten klick (auf bspw. Inhalt1) angezeigt wird und beim zweiten klick (wieder auf Inhalt1) wieder verschwindet. Soweit so gut.
    Ich hätte es aber gern so, dass ich auf bspw. Inhalt1 klicke und der Inhalt kommt (bis hierhin funktioniert der code) und wenn ich dann auf bspw. Inhalt2 klicke, der Inhalt1 verschwindet und der Inhalt2 dargestellt wird.
    Ich versuch es die ganze Zeit mit einer if-funktion, qusi: Wenn Inhalt1 dargestellt ist, sind inhalt2 und Inhalt3 nicht dargestellt; Wenn Inhalt2 dargestellt, sind Inhalt1 und Inhalt3 nicht dargestellt..usw. Irgendwie so.. Ich bekomm das einfach nicht hin.
    Oder es gibt noch eine bessere Lösung?! Danke schonmal!

  • Code
    "item img1 active"

    ist keine ID. Eine ID darf keine Leer- und Sonderzeichen enthalten, außerdem nicht mit Zahlen beginnen. Das musst Du vermutlich als erstes anpassen.

    Wenn man dir konkreter helfen soll, zeig den kompletten Quellcode oder besser einen Link zur Seite.