Code per Javascript verstecken, anzeigen und automatisch schließen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Code per Javascript verstecken, anzeigen und automatisch schließen

    Hallo miteinander.

    Ich bin schon lange auf der Suche nach einem geeigneten Script für meine Homepage. Leider finde ich nur Menüs, welche mir nicht helfen.
    Ich habe 3 <div>-Blöcke, welche ich verstecken möchte. Eine Leiste (wie Navigation) mit dem Text: Öffnen: DIV1 | DIV2 | DIV3 soll den bestimmten <div> öffnen.
    So weit, so gut: Diese Funktion habe ich hier (Javascript: Text verbergen und anzeigen) gefunden.

    Ich möchte jedoch auch, dass gleichzeitig nur 1 <div> offen sein kann. D.h. dass bei einem Klick auf öffnen die bereits aktiven geschlossen werden müssen.
    Leider blicke ich bim verlinkten Beitrag nicht ganz durch.
    Vielleicht ist es jemandem möglich, den Code so zu verändern, dass die <div> automatisch geschlossen werden.

    Herzlichen Dank für eure Bemühungen und freundliche Grüsse

    Hier der funktionierende Text ohne automatisches Schliessen:

    Quellcode

    1. <script type="text/javascript">
    2. function show (member) {
    3. if (document.getElementById) {
    4. if (document.getElementById(member).style.display == "block") {
    5. document.getElementById(member).style.display = "none";
    6. } else {
    7. document.getElementById(member).style.display = "block";
    8. }
    9. }
    10. }
    11. </script>
    12. </head><body>
    13. <a href="javascript:show('B')">B anzeigen</a><br>
    14. <table id="B" style="display:none">
    15. <tr><td>B's Details</td></tr>
    16. </table>
    17. <a href="javascript:show('C')">C anzeigen</a><br>
    18. <table id="C" style="display:none">
    19. <tr><td>C's Details</td></tr>
    20. </table>
    21. <a href="javascript:show('A')">A anzeigen</a><br>
    22. <table id="A" style="display:none">
    23. <tr><td>A's Details</td></tr>
    24. </table>
    Alles anzeigen
  • Hiho,

    du müsstest lediglich in deiner Else-Bedingung nochmal alle anderen Tabellen ausblenden. Dann funktioniert das alles :)


    Quellcode

    1. function show (member) {
    2. if (document.getElementById) {
    3. if (document.getElementById(member).style.display == "block") {
    4. document.getElementById(member).style.display = "none";
    5. } else {
    6. document.getElementById("A").style.display = "none";
    7. document.getElementById("B").style.display = "none";
    8. document.getElementById("C").style.display = "none";
    9. document.getElementById(member).style.display = "block";
    10. }
    11. }
    12. }
    Alles anzeigen
  • Toll, das funktioniert! Danke viel mals. Habe jetzt nur noch das Problem, dass der Background, welchen ich für die <div> definiert habe nur an den Inhalt angepasst werden und nicht wie gewünscht die ganze Fensterbreite ausfüllen. Ausserdem werden meine <div> um wenige Pixels (1?) verschoben. Könnte dies die Tabelle sein?

    Danke nochmals :)
  • Danke Snowflake für den Link.
    Ich habe nun den anderen Code genommen, da die <div> nicht am Inhalt angepasst werden.
    Habe nur noch 2 Wünsche:

    1. Wenn ich nochmals auf den gleichen Link klicke, verschwindet das "angezeigte Versteckte" nicht wieder.
    2. Verschachteln geht leider nicht, d.h., wenn ich eini Navi aufrufe und in dieser Navi noch andere Dinge aufrüfe, schliesst es logischerweise die ganze Navi mit dem offenen "Unter-Navi", da ja alle anderen geschlossen werden.

    Danke