Aufklappmenü / Ordnerstruktur mit Java

A

altox-de

Erfahrenes Mitglied
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
 
Zuletzt bearbeitet:
Hallo!
Super! Das wäre also der Code:

PHP: 
<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
 
Zuletzt bearbeitet:
Hallo!
Meine Navigation klappt so eigentlich schon ganz gut.
Das ist der jetzige Code:
PHP: 
				<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
 
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...
 
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.
 
Hier ein Ausschnitt:

PHP: 
<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...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück