Div öffnen und andere schließen

[gionce]

Hallo zusammen,

nachdem ich hier schon oft nützliche Tipps gefunden habe, hier jetzt doch eine Frage, die ich nach langem Suchen nicht lösen konnte:

Internetseite, einfacher Aufbau. Navigationsleiste, 5 Buttons, mit jedem soll ein Div-Layer geöffnet werden, der praktisch den Inhalt zeigt. Möchte aber mit dem klicken gleichzeitig den zuletzt geöffneten schließen. Bzw. da die ganze Seite aus Div-layern (11 Stück) besteht sollen sich auch nur eben diese 5 im Wechsel/klicken öffnen und schließen.

2. Teil der Frage. Wenn ich z.B. mit dem "home"-Button den sub1div-layer öffne, und der einen weiteren "link" hat, z.B. ein Foto dass sich in einem weiteren Layer öffnet, müssen sich natürlich dann beim klick auf einen anderen "Haupt"-button beide geöffneten Layer schließen, während dann von mir aus "Kontakt" öffnet.

Umgesetzt bis jetzt mit:

<script type="text/javascript">
<!--
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
}
else {
obj[id].style.visibility = 'visible';
}
}
//-->
  </script>
  <style type="text/css">
<!--
#sub1Div
{
visibility:hidden;width:510px;
height:370px;
padding: 40px;
position:absolute;
right:50%;
margin-right: -100px;
top:130px;
}
(....hier kommen dann noch weitere.....)
-->
  </style>

Abgerufen habe ich sie dann im html-Teil mit:

<a href="javascript:ShowHide('sub1Div')">Home</a>

Jetzt habe ich in einem anderen Forum den Tip gefunden:

var lastID = false;
function swap(targetID) {
obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

if (lastID && lastID != targetID){  
	document.getElementById(lastID).display = "none";  
}  
lastID = targetID;  

}

Kann damit aber nichts anfangen / einbauen.
Ich würde mich als Java/html Anfänger mit Grundkenntnissen beschreiben, und bitte um eine Hilfe.

Danke Euch und einen entspannten Resttag.
gionce

[Alex]

Hi,

var lastID = false;
function swap(targetID) {
obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

Hier wird geschaut "Ist die Display-Eigenschaft auf Block, wenn ja ändere auf None, wenn nicht, dann ändere auf Block"

Da mit Fragezeichen und Doppelpunkt ist nur eine verkürzte Schreibweise für if/else.

Die Nutzen da Display anstatt Visibility (wie du es machst). Unterschied ist, dass bei Display:none das Element voll verschwindet. Bei Visibility:none sieht man es nur nicht, aber es wird der nötige Platz für das Element freigehalten.

if (lastID && lastID != targetID){
document.getElementById(lastID).display = "none";
}
lastID = targetID;
}

»»
Dadurch merkt er sich, was er zuletzt aufgerufen hat. Wenn dann ein neuer layer geöffnet wird, wird der alte geschlossen.

Gruß
Alex

[gionce]

Hallo Alex,
Danke für die schnelle Antwort.

Ok, das heißt, wenn ich im Script-Teil das Stück ersetze durch die Displayfunktion, und im html-Teil ja meine Div-container auf "Abruf" liegen, wie kann ich sie dann abfragen?
Bis jetzt werden sie ja anklicken des Buttons z.B. "Fotos" ein und ausgeblendet:

<a href="javascript:ShowHide('sub4Div')">Fotos</a>

D.h. ich müßte schreiben:

<script type="text/javascript">
<!--

var lastID = false;
function swap(targetID) {
obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

if (lastID && lastID != targetID){  
	document.getElementById(lastID).display = "none";  
}  
lastID = targetID;  

}
//-->
  </script>
  <style type="text/css">
<!--
#sub4Div
{
visibility:hidden;width:510px;
height:370px;
padding: 40px;
position:absolute;
right:50%;
margin-right: -100px;
top:130px;
}

-->
  </style>

und dann im body:

<a href=" ...Was kommt dann hier hin?...('sub4Div')">Fotos</a>

<div id="sub4Div">
<div
 style=" blablabla

oder muß das grundsätzlich anders aussehen?
Vielen Dank.
Gruß gionce

[Alex]

Hallo,

function swap(targetID) {
obj = document.getElementById(targetID);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

if (lastID && lastID != targetID){
document.getElementById(lastID).display = "none";
}

<a href=" ...Was kommt dann hier hin?...('sub4Div')">Fotos</a>

Die Funktion heißt    swap    also solltest du auch swap reinschreiben ;)
Dann wird das auch klappen

Gruß
Alex

[gionce]

Hallo,

so jetzt entpuppe ich mich als DAU.

Ich kann den Fehler nicht finden. Nachdem ich vergessen hatte bei den DIV-Boxen das hidden rauszulöschen, sehe ich sie jetzt auch, aber die Funktion ist so wie vorher trotz des swap-Befehls. Beim 2. Klick auf den selben Button schließen sie erst wieder. Ich kann wie vorher auch alle 5 gleichzeitig geöffnet haben - was ich ja nicht will.

Kann es sein, dass da noch irgendwo hinmuß welche DivIDs auf none oder block gecheckt werden sollen?

Gruß gionce

[Alex]

Hi,

Ich kann den Fehler nicht finden. Nachdem ich vergessen hatte bei den DIV-Boxen das hidden rauszulöschen, sehe ich sie jetzt auch, aber die Funktion ist so wie vorher trotz des swap-Befehls. Beim 2. Klick auf den selben Button schließen sie erst wieder. Ich kann wie vorher auch alle 5 gleichzeitig geöffnet haben - was ich ja nicht will.

Was sagt denn z.B. die Firefox JavaScript Fehler-Konsole?

Hast du das Ding irgendwo online, dass man es ausprobieren kann?

Kann es sein, dass da noch irgendwo hinmuß welche DivIDs auf none oder block gecheckt werden sollen?

Hast du das komplette Ding kopiert? Weil der letzte Teil sollte das ja eigentlich erledigen...

Gruß
Alex

[gionce]

Hallo Alex,

ich habe es hochgeladen.

Bitte mit Firefox anschauen, zumindest bei mir haut´s der IE total zusammen.

Für alle, die dies später mal lesen: ich kann den Link nicht lange online lassen.

www.gidonvogt.de/Ver3.html

Ich danke für die Hilfe.

Gruß gionce