Code per Javascript verstecken, anzeigen und automatisch schließen

Beginner

Tuesday, April 21st 2009, 8:53pm

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:

Source code

<script type="text/javascript">
    function show (member) {
        if (document.getElementById) {
            if (document.getElementById(member).style.display == "block") {
                document.getElementById(member).style.display = "none";
            } else {
                document.getElementById(member).style.display = "block";
            }
        }
    }
</script>
 
</head><body>
 
    <a href="javascript:show('B')">B anzeigen</a><br>
    <table id="B" style="display:none">
        <tr><td>B's Details</td></tr>
    </table>
 
    <a href="javascript:show('C')">C anzeigen</a><br>
    <table id="C" style="display:none">
        <tr><td>C's Details</td></tr>
    </table>
 
    <a href="javascript:show('A')">A anzeigen</a><br>
    <table id="A" style="display:none">
        <tr><td>A's Details</td></tr>
    </table>

Argui

Beginner

Posts: 1

Tuesday, April 21st 2009, 9:26pm

Hiho,

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

JavaScript Code

function show (member) {
        if (document.getElementById) {
            if (document.getElementById(member).style.display == "block") {
                document.getElementById(member).style.display = "none";
            } else {
				document.getElementById("A").style.display = "none";
				document.getElementById("B").style.display = "none";
				document.getElementById("C").style.display = "none";
                document.getElementById(member).style.display = "block";
            }
        }
    }

sartOrial

Beginner

Posts: 3

Tuesday, April 21st 2009, 10:02pm

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

Snowflake

Professional

Posts: 370

Tuesday, April 21st 2009, 10:06pm

Sollte das ganze nicht bei A,B,c bleiben sollen, sondern soll Dynamisch fungieren, würde ich dir empfehlen:

Die Divs bekommen eine Klassenzuteilung

HTML Code

<div id="a" class="hideme"></div>
<div id="b" class="hideme"></div>
<div id="c" class="hideme"></div>
<div id="d" class="hideme"></div>

Und dann, solltest du dir das mal anschauen:
http://www.easy-coding.de/post/23171.html#post23171

sartOrial

Beginner

Posts: 3

Wednesday, April 22nd 2009, 12:14pm

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