# Aufklappmenü / Ordnerstruktur mit Java



## altox-de (21. Januar 2005)

Hallo zusammen,
hätte da mal ne Frage:

Hat jemand ein gutes Script, wie man so ein Aufklappmenü realisieren könnte?
Also dass erst z.B: drei Ordner mit jeweils einem plus vor ihnen angezeigt werden.
Sobald man auf eines der plusse klickt, erscheint an dessen stelle ein minus und unter dem Ordner werden die Unterordner angezeigt...

===> vor Klick:

+ Ordner
+ Ordner
+ Ordner

===> nach Klick:

+ Ordner
 - Ordner
. + Unterordner
. + Unterordner
. + Unterordner
+ Ordner


Danke, 
Claudi


----------



## daddz (21. Januar 2005)

Hi
kuck mal hier: Klick! 
dann musst du halt nur noch die + und - Bilder davor setzen und fertig!

greetz
daddz


----------



## altox-de (21. Januar 2005)

Hallo!
Super! Das wäre also der Code:


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

function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById("cat2").style.display="none";

d.getElementById(divid).style.display="inline";

}
//-->
</script>
<body>
<a href="#" onclick="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#">Sub 1</a><br>
<a href="#">Sub 2</a><br>
<a href="#">Sub 3</a><br>
</div>
```

Aber wie mache ich, dass sich dann plus und minus noch vertauschen?
Außerdem: Geht es, dass wenn ein Ordner "geöffnet" ist, er durch einen weiteren Klick wieder geschlossen wird?

thx


----------



## con-f-use (21. Januar 2005)

http://www.tutorials.de/forum/showthread.php?t=179417


----------



## Sven Mintel (21. Januar 2005)

Oder: http://www.tutorials.de/tutorials164340.html


----------



## altox-de (22. Januar 2005)

Hallo!
Meine Navigation klappt so eigentlich schon ganz gut.
Das ist der jetzige Code: 
	
	
	



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

function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";
document.getElementById("cat3").style.display="none";
document.getElementById("cat4").style.display="none";
document.getElementById("cat5").style.display="none";

document.getElementById(divid).style.display="inline";

}
//-->
</script>
				</head><b><i>Altes Testament (AT):</i></b><br>
				<a href="#" onclick="show('cat1')"><b><img src="../images/plus.jpg" border=0>&nbsp;Stammväter und -mütter</b></a><br>
			</font>
		<div id="cat1" style="display:none">
			<font face="Arial"><a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Abraham</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Sara</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Rahel</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Rebekka</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Adam</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Noah</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Abraham</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Isaak</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Jakob</a><br>
			</font><font size=1 face="Arial"><br></font></div>
		<font face="Arial"><a href="#" onclick="show('cat2')"><b><img src="../images/plus.jpg" border=0>&nbsp;Propheten</b></a><br>
		</font>
		<div id="cat2" style="display:none">
			<font face="Arial"><a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Samuel</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Nathan</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Elija</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Amos</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Jonas</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Jesaja</a><br>
			</font><font size=1 face="Arial"><br></font></div>
		<font face="Arial"><a href="#" onclick="show('cat3')"><b><img src="../images/plus.jpg" border=0>&nbsp;Persönlichkeiten</b></a><br>
		</font>
		<div id="cat3" style="display:none">
			<font face="Arial"><a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Ruth</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Judith</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Esther</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Mose</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;David</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Salomo</a><br>
			</font></div>
		<p></p>
		<font face="Arial"><b><i>Neues Testament (NT):</i></b><br>
			<a href="#" onclick="show('cat4')"><b><img src="../images/plus.jpg" border=0>&nbsp;Stammväter und -mütter</b></a><br>
		</font>
		<div id="cat4" style="display:none">
			<font face="Arial"><a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Anna</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Elisabeth</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Maria</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Joachim</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Zacharias</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Josef</a><br>
			</font><font size=1 face="Arial"><br></font></div>
		<font face="Arial"><a href="#" onclick="show('cat5')"><b><img src="../images/plus.jpg" border=0>&nbsp;Propheten</b></a><br>
		</font>
		<div id="cat5" style="display:none">
			<font face="Arial"><a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Johannes</a><br>
				<a class="sub">&nbsp;&nbsp;&nbsp;&nbsp;Simeon</a>
				
			</font><font size=1 face="Arial"><br></font></div>
```

Testen könnt ihr das Script auf http://www.biblothek.de >> Übersicht/Index

Jetzt müsste ich nur noch irgendwo hinzufügen können,
dass sich das +-Bild in ein --Bild verwandelt, wenn man auf es klickt.
Danke, 
Claudi


----------



## con-f-use (22. Januar 2005)

Ja, und was erwartets du noch von uns? Wir haben dir direkt vor die Nase gesetzt, wie's geht, den Rest wirst du wohl alleine schaffen...


----------



## altox-de (22. Januar 2005)

Hallo!
Das eine Tutorial lässt sich nicht mit meiner Vorstellung vereinbaren
und der andere Thread lässt nur Text verschwinden...

Ich möchte eine Hilfestellung, wo ich was einbauen muss, dass das minus.jpg statt des plus.jpgs angezeigt wird.


----------



## Sven Mintel (22. Januar 2005)

altox-de hat gesagt.:
			
		

> Ich möchte eine Hilfestellung, wo ich was einbauen muss, dass das minus.jpg statt des plus.jpgs angezeigt wird.




```
<img src="plus.jpg"onclick="this.src=(this.src.indexOf('plus.jpg')>-1)?'minus.jpg':'plus.jpg'">
```


----------



## altox-de (23. Januar 2005)

Hier ein Ausschnitt:


```
<b><i>Altes Testament (AT):</i></b><br>
				<a href="#" onclick="show('cat1')"><img id="plus" src="plus.jpg" onclick="this.src=(this.src.indexOf('pus.jpg')>-1)?'minus.jpg':'plus.jpg'" name="plus" border=0><b>&nbsp;Stammväter und -mütter</b></a><br>
			</font>
```

Es klappt leider nicht...


----------



## flooo (23. Januar 2005)

altox-de hat gesagt.:
			
		

> Hier ein Ausschnitt:
> 
> 
> ```
> ...


da fehlt ein l bei "this.src.indexOf('p*l*us.jpg')"
flooo


----------



## altox-de (23. Januar 2005)

Hey - ja (das hab' ich aber auch nicht gesehen...)
Jetzt verändern sich zwar plus und minus - aber nicht parallel zu dem öffnen der Ordner...
Außerdem schließen sich die Ordner nicht, wenn man auf das Minus klickt.
http://www.biblothek.de >> Index/Übersicht


----------



## Sven Mintel (23. Januar 2005)

Das war auch nicht deine Fragestellung


> .....dass das minus.jpg statt des plus.jpgs angezeigt wird.




....._Außerdem schließen sich die Ordner nicht, wenn man auf das Minus klickt._
du hast auch nix in deinem Skript, was dies tut...daher passiert das nicht.


----------



## nex_m (24. Januar 2005)

Kannst dir das ja mal anschauen:

http://javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=128 

MFG


----------

