Tree öffnen und gleichzeitig Unterordner als Link

[c2]

  
<script type='text/javascript'>  
     function anzeigen(das,was){  
  
      if(document.getElementById(das).style.display=='none') {  
        document.getElementById(das).style.display='block';  
        was.src="Ordericonopen.JPG";  
      }  
      else {  
        document.getElementById(das).style.display='none';  
        was.src='Ordericon.JPG';  
       }  
    }  
  
 </script>  
<a href="javascript: anzeigen('ordner_1', bild_1);" class="Ordner">  
 <img name="bild_1" src="Ordericon.JPG" class="Bild">Ordner  
</a><br>  
<div id="ordner_1" class="Rand" style="display: none;">  
 <a href="Unterordner.html" class="link">Unterordner</a><br>  
 <a href="Unterordner2.html" class="link">2.Unterordner</a><br>  
 <a href="Unterordner3.html" class="link">3.Unterordner</a><br>  
</div>  
  
<a href="javascript: anzeigen('ordner_2', bild_2);" class="Ordner">  
 <img name="bild_2" src="Ordericon.JPG" class="Bild"> 2.Ordner  
</a><br>  
<div id="ordner_2" class="Rand" style="display: none;">  
 <a href="_Unterordner" class="link">Unterordner</a><br>  
 <a href="_Unterordner2" class="link">2.Unterordner</a><br>  
 <a href="_Unterordner3" class="link">3.Unterordner</a><br>  
</div>  
  

Hi!
Also das ganze zeigt mir 2 "Orndner" an. Wenn ich auf einen der beiden Ordner klicke, öffnet sich der Tree und ich sehe die darunterliegenden Ordner.
Was ich jetzt möchte, aber leider nicht zusammenbringe, ist dass wenn ich auf "Ordner" klicke, sich der Tree öffnet, und ich gleichzeitig in einem weiteren div-Container alle Unterordner anzeige.
Also klick - tree öffnet ich mit Unterordner 1 -3, und rechts daneben seh ich nochmal die Unterordner1-3 als einfache links angezeigt. wär super wenn mir dabei jemand helfen könnte.
Vielen Dank!
c2

[Felix Riesterer]

Lieber c2,

ich habe soetwas im Prinzip schon gemacht. Das zugehörige JavaScript (nennt sich "Explorer") findest Du in meiner Dateiverwaltung enthalten. Dort benötigst Du eigentlich nur den Unterordner "explorer", in welchem Du dann alles das hast, was Du in oben verlinktem Downloadordner im Einsatz siehst. Dort kannst Du auch gleich sehen, wie alles zusammen einzusetzen ist.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Käfer]

Hallo auch!

ich habe noch nicht ganz verstanden, wo genau die Unterordner zusätzlich angezeigt werden sollen.

Aber im Prinzip könntest Du doch eine weitere DIV dort anlegen, wo die Ordner erscheinen sollen und diese in deinen Script mit dem Tree öffnen lassen. Zur Identifizierung könntest Du diesen entweder so benennen, dass die ID des Tree-DIVs darin vorkommt, oder Du übergibst die ID in einem zusätzlichen Parameter.

Wenn Du willst, dass die Links automatisch aus dem Tree-DIV kopiert werden, musst Du ein etwas aufwändigeres Skript erstellen, dass die childNodes des Tree-DIVs durchgeht und wenn ein Link darunter ist, diesen kopiert. Dazu mal in der JavaScript-Objektreferenz unter node nachsehen.

Gruß,
Käfer

P.S.: Wenn Du willst, dass sich Dein Icon ändert, wenn Du den Ordner öffnest, dann musst Du diesen entweder statt per name per ID identifizieren (im Skript verwendest Du document.getElementById) oder document.getElementsByName benutzen (Achtung: liefert ein Array zurück, nicht nur ein einzelnes Element).

Hi!
Also das ganze zeigt mir 2 "Orndner" an. Wenn ich auf einen der beiden Ordner klicke, öffnet sich der Tree und ich sehe die darunterliegenden Ordner.
Was ich jetzt möchte, aber leider nicht zusammenbringe, ist dass wenn ich auf "Ordner" klicke, sich der Tree öffnet, und ich gleichzeitig in einem weiteren div-Container alle Unterordner anzeige.
Also klick - tree öffnet ich mit Unterordner 1 -3, und rechts daneben seh ich nochmal die Unterordner1-3 als einfache links angezeigt. wär super wenn mir dabei jemand helfen könnte.
Vielen Dank!
c2

[c2]

Danke erstmal für die antworten.
Also so ganz versteh ich das nicht was ihr meint. Denk mal ich hab mich nicht soo sonderlich gut ausgedrückt.
Ich versuch das mal zu veranschaulichen...
So sieht das ganze aus:

-Ornder1
-Ordner2

Wenn ich jetzt auf z.B.: Ordner1 klicke "öffnet" sich dieser und zeigt die Unterordner.

-Ordner1
---Unterordner1
---Unterordner2
---Unterordner3
-Ordner2

Ich hätt es gerne so, dass es nach dem anklicken von Ordner1 so aussieht:
-Ordner1
---Unterordner1                          Im Ordner1 enthalten:
---Unterordner2                          Unterordner1
---Unterordner3                          Unterordner2
-Ordner2                                 Unterordner3

die Unterordner1-3 sind natürlich verlinkt, so als ob man sie im tree auswählt.
hoffe das klärt mein problem.

danke nochmal.
mfg c2

[Käfer]

Ok... dann kannst Du - wie in meinem Lösungsvorschlag beschrieben - entwerder pro Ordner einen entsprechenden DIV für diese Anzeige erstellen und wie das ursprüngliche auch einblenden. Oder liegt Dein Problem darin, es richtig zu positionieren?

Gruß!
Käfer

Danke erstmal für die antworten.
Also so ganz versteh ich das nicht was ihr meint. Denk mal ich hab mich nicht soo sonderlich gut ausgedrückt.
Ich versuch das mal zu veranschaulichen...
So sieht das ganze aus:

-Ornder1
-Ordner2

Wenn ich jetzt auf z.B.: Ordner1 klicke "öffnet" sich dieser und zeigt die Unterordner.

-Ordner1
---Unterordner1
---Unterordner2
---Unterordner3
-Ordner2

Ich hätt es gerne so, dass es nach dem anklicken von Ordner1 so aussieht:
-Ordner1
---Unterordner1                          Im Ordner1 enthalten:
---Unterordner2                          Unterordner1
---Unterordner3                          Unterordner2
-Ordner2                                 Unterordner3

die Unterordner1-3 sind natürlich verlinkt, so als ob man sie im tree auswählt.
hoffe das klärt mein problem.

danke nochmal.
mfg c2

[c2]

Das klingt logisch, allerdings ist der komplette code nicht von mir und ich bin in javascript ziemlich mies. wär nett wenn du mir den entsprechenden code posten könntest. das mit der positionierung bekomme ich schon hin ;) *hoff
schonmal danke!

Ok... dann kannst Du - wie in meinem Lösungsvorschlag beschrieben - entwerder pro Ordner einen entsprechenden DIV für diese Anzeige erstellen und wie das ursprüngliche auch einblenden. Oder liegt Dein Problem darin, es richtig zu positionieren?

[Käfer]

  
<script type='text/javascript'>  
     function anzeigen(das,dasauchnoch,was){  
  
      if(document.getElementById(das).style.display=='none') {  
        document.getElementById(das).style.display='block';  
        document.getElementById(dasauchnoch).style.display='block';  
        eval(was + ".src='Ordericonopen.JPG'");  
      }  
      else {  
        document.getElementById(das).style.display='none';  
        document.getElementById(dasauchnoch).style.display='none';  
        eval(was + ".src='Ordericon.JPG'");  
       }  
    }  
  
</script>  
<a href="javascript: anzeigen('ordner_1','bild_1');" class="Ordner">  
 <img name="bild_1" src="Ordericon.JPG" class="Bild">Ordner  
</a><br>  
<div id="ordner_1" class="Rand" style="display: none;">  
 <a href="Unterordner.html" class="link">Unterordner</a><br>  
 <a href="Unterordner2.html" class="link">2.Unterordner</a><br>  
 <a href="Unterordner3.html" class="link">3.Unterordner</a><br>  
</div>  
  
<div id="unterordner_1" class="Rand" style="display: none;">  
 <a href="Unterordner.html" class="link">Unterordner</a><br>  
 <a href="Unterordner2.html" class="link">2.Unterordner</a><br>  
 <a href="Unterordner3.html" class="link">3.Unterordner</a><br>  
</div>  
  
<a href="javascript: anzeigen('ordner_2','unterorder_2','bild_2');" class="Ordner">  
 <img name="bild_2" src="Ordericon.JPG" class="Bild"> 2.Ordner  
</a><br>  
<div id="ordner_2" class="Rand" style="display: none;">  
 <a href="_Unterordner" class="link">Unterordner</a><br>  
 <a href="_Unterordner2" class="link">2.Unterordner</a><br>  
 <a href="_Unterordner3" class="link">3.Unterordner</a><br>  
</div>  
  
<div id="unterordner_2" class="Rand" style="display: none;">  
 <a href="_Unterordner" class="link">Unterordner</a><br>  
 <a href="_Unterordner2" class="link">2.Unterordner</a><br>  
 <a href="_Unterordner3" class="link">3.Unterordner</a><br>  
</div>  
  

Das klingt logisch, allerdings ist der komplette code nicht von mir und ich bin in javascript ziemlich mies. wär nett wenn du mir den entsprechenden code posten könntest. das mit der positionierung bekomme ich schon hin ;) *hoff
schonmal danke!

Ok... dann kannst Du - wie in meinem Lösungsvorschlag beschrieben - entwerder pro Ordner einen entsprechenden DIV für diese Anzeige erstellen und wie das ursprüngliche auch einblenden. Oder liegt Dein Problem darin, es richtig zu positionieren?

[Felix Riesterer]

Lieber Käfer,

ich halte das ganze DIV-Gerüst für suboptimal. Meiner Meinung nach ist eine Ordnerstruktur besser mittels <ul>-Elementen gelöst. Der Zugriff auf die entsprechenden Elemente ist damit auch besser regelbar...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Käfer]

Hallo Felix,

das wäre aus Gründen der Barrierefreiheit sicher sinnvoll, macht aber letztlich keinen großen Unterschied.

Außerdem hat der OP ja explizit nach Code gefragt, der ihm in seiner vorgegebenen Situation hilft. Zumal es ihm ja auch darum ging, neben der Baumdarstellung der Gesamtstruktur den Inhalt des aktuellen Ordners anzuzeigen.

Gruß,
Käfer

P.S.: Was machen eingentlich die @s in Deinen Links?

[Felix Riesterer]

Lieber Käfer,

ich verstehe nicht, was Du mit

P.S.: Was machen eingentlich die @s in Deinen Links?

meinst. Von welchen Links sprichst Du? Meinst Du etwa meine hier eingebundenen Verweise?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Käfer]

Hat sich schon erledigt... liegt an der Art und Weise, wie Links für die Forensoftware in Beiträgen zu kodieren sind. In deiner Singnatur verlinkst Du z.B. auf www.ellwangen.de und in der Antwort auf Deinen Beitrag taucht der wie folgt auf:

[link:http://www.ellwangen.de/@title=Ellwangen]

Mit dem @ werden der Forensoftware zusätzliche Attribute übergeben, es sah für mich aber erstmal so aus, als wäre das Bestandteil der URL.

Gruß,
Käfer

[Felix Riesterer]

Liebe(r) c2,

was gefällt Dir an meiner Lösung nicht, die ich Dir vorgeschlagen hatte?

Liebe Grüße aus Ellwangen,

Felix Riesterer.