Auf-/Zuklappen mit JS

crimi · #1 (**permalink**) 21.09.2008, 13:51

Hey folgenden Code habe ich für mich geschrieben:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;

function versteckt() 
{ 
	if (angezeigt)
	{
		document.getElementById('ghost').style.display = 'none';
		angezeigt = false;
		window.document.images['Icon'].src                     = 'minus.png';
    	window.document.getElementById('StatusText').innerHTML = 'schliessen';
	}
	else
	{
		document.getElementById('ghost').style.display = 'block';
		angezeigt = true;
		window.document.images['Icon'].src                     = 'plus.png';
    	window.document.getElementById('StatusText').innerHTML = 'oeffnen';
	}
} 
</script> 
<body>
	<table cellspacing="2" cellpadding="2" border="0"> 
		<tr> 
		    <td style="display : none" id="ghost">
		    	Dieser Bereich kann ein-/ausgeblendet werden!
			</td> 
		</tr> 
		<tr> 
		    <td> 
				<img src="plus.png" style="border-width:0px;" alt="+" name="Icon">
				<a href="" onclick="versteckt(); return false;" id="StatusText">oeffnen</a>
				<br />
				Bla Bla Bla
				<br />
			 </td> 
		</tr> 

	</table>
</body>
</html>

Problem:
Die Änderung des namens für oeffnen/schliessen funktioniert beim 1. Aufruf nicht, danach aendert er es logischerweise immer in den falschen Wert.
Außerdem wird der eingeblendete Text beim 2. Mal seltsamerweise nach rechts eingerückt.

Getestet habe ich mit FF3 und IE7

Das Ganze will ich als Newsscript einsetzen. Wie gestalte ich die JS-Funktion am besten, so dass ich für jede News einen eigenen Button ein/ausblenden habe?

threadi · #2 (**permalink**) 21.09.2008, 14:35

Beim ersten Aufruf geht er auch in den else-Zweig der Bedingung, weshalb du vermutlich keine Änderung siehst. Prüfe statt

Code:

if(angezeigt)

doch lieber auf

Code:

if(document.getElementById('ghost').style.display=="none")

und dreh die beiden Bedingungen um.

crimi · #3 (**permalink**) 21.09.2008, 15:11

ja da haste wohl recht

aber das einrücken wird dadurch auch noch nicht gefixt. und wie mache ich das, wenn ich auf einer seite mehrere solcher klapptexte habe?

Sparta8 · #4 (**permalink**) 21.09.2008, 15:19

Ich hatte das mit mootools gelöst. Leider habe ich von JS nicht viel Ahnung und deshalb habe ich jedem Klapptxet auf der Seite eine eigene ID gegeben und dann eine Funktion mit diesen IDs gefüttert. Das geht kann man sicherlich auch schöner lösen, aber es funktionierte recht gut.

Bei mootools hast vorallem den Vorteil, dass es bei sehr vielen Browsern ohne Fehler rennt.

threadi · #5 (**permalink**) 21.09.2008, 15:51

Zitat:

Zitat von crimi

aber das einrücken wird dadurch auch noch nicht gefixt.

Liegt vermutlich daran, dass du bei Tabellenzellen nicht "block" als display-Wert zuweisen solltest. "display: table-cell;" wäre das richtige. Was jedoch wiederum der IE6 nicht kennt, dort musst du "block" verwenden.

Zitat:

und wie mache ich das, wenn ich auf einer seite mehrere solcher klapptexte habe?

Für jede der Zellen eine eigene ID vergeben und auf dieser Referenzieren. Das Script müsste dann natürlich entsprechend angepasst werden ("versteckt(objektID);").

crimi · #6 (**permalink**) 22.09.2008, 00:44

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<script type="text/javascript" language="JavaScript1.2">
var angezeigt = false;




function versteckt(objektID) 
{ 
	
	ghost = "ghost" + objektID;
	statustext = "StatusText" + objektID;
	if(document.getElementById(ghost).style.display=='none') {
		document.getElementById(ghost).style.display = 'block';
		window.document.getElementById(StatusText).innerHTML = 'schliessen';
 		/*window.document.images['Icon'].src = 'minus.png';*/   	
	}
	else {
		document.getElementById(ghost).style.display = 'none';
		window.document.getElementById(StatusText).innerHTML = 'oeffnen';
		/*window.document.images['Icon'].src = 'plus.png';*/
	}
} 
</script> 

<body>
	<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick</td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost01">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('01'); return false;" id="StatusText01">oeffnen</a>
			</td> 
		</tr> 
	</table>
		<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick</td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost02">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('02'); return false;" id="StatusText02">oeffnen</a>
			</td> 
		</tr> 
	</table>
		<table width="400px"> 
		<caption>TestNews</caption>
		<tr>
			<td>21.09.2008 - 23:23 - von Patrick </td>
		</tr>
		<tr> 
		    <td>
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier 
				steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht 
				ganz viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz 
				viel Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel 
				Shortbody Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Short
				body Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody Text 
				Hier steht ganz viel Shortbody Text Hier steht ganz viel Shortbody 
				Text Hier steht ganz viel Shortbody Text 
			</td> 
		</tr> 
		<tr> 
		    <td>
		    	<div style="display : none" id="ghost03">
		    		Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf-
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, der
					beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra lange 
					Longtext, der beliebig auf- und zu geklappt werden kann! Hier steht dann 
					der ultra lange Longtext, der beliebig auf- und zu geklappt werden kann! 
					Hier steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! Hier steht dann der ultra lange Longtext, der beliebig auf- 
					und zu geklappt werden kann! Hier steht dann der ultra lange Longtext, 
					der beliebig auf- und zu geklappt werden kann! Hier steht dann der ultra 
					lange Longtext, der beliebig auf- und zu geklappt werden kann! Hier 
					steht dann der ultra lange Longtext, der beliebig auf- und zu geklappt 
					werden kann! 
		    	</div>
				<a href="" onclick="versteckt('03'); return false;" id="StatusText03">oeffnen</a>
			</td> 
		</tr> 
	</table>
</body>
</html>

Soweit so gut.

Meine Probleme:
Die Box poppt nur ganz kurz auf und verschwindet direkt danach wieder (kann ich überhaupt nicht nachvollziehen).
Außerdem springt der nach jedem Klick auf oeffenen/schliessen wieder ganz oben an den Seitenbeginn.

Wie änder ich das?

crimi · #7 (**permalink**) 23.09.2008, 16:54

hat keiner eine idee? :\

Ronnaki · #8 (**permalink**) 23.09.2008, 17:27

da hat das eine mit dem anderen zu tun. Gib den Links als HREF mal ein "#", dann klappt es auch. Momentan wird unmittelbar nach dem JS-Aufruf zum aufklappen die Seite neu geladen, ergo ist alles wieder auf Anfang.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln