Seitenbereich aufklappen

Beitrag von **nickvergessen** » 30.12.2006 17:41

ich hab mal ne Frage,
kann mir jemand erklären, wie der Effekt funktioniert,
den man bei folgender Seite unter dem Punkt "General Information" mit dem + und - als auf und zuklappen des Textes erzeugt:
Link
Also nicht, das es ein JavaScript ist, das weiß ich auch. Ich will wissen wie dieses Script aussehen muss

Underhill · Beitrag von **Underhill** » 31.12.2006 15:13

Hi,

diese beiden Eigenschaften sind dafuer verantwortlich:
http://de.selfhtml.org/css/eigenschafte ... visibility
http://de.selfhtml.org/css/eigenschafte ... tm#display
Also CSS+JS=DHTML...

Gruss
Underhill

Beitrag von **nickvergessen** » 31.12.2006 15:27

Underhill hat geschrieben:http://de.selfhtml.org/css/eigenschafte ... visibility

aber wenn ich das so nehme, hab ich ja kein Platz gespart....
den dann wird der Platz einfach leergelassen.
Aber ich will, dass dann der ganze nachfolgende text auch "hochrutscht".

Underhill · Beitrag von **Underhill** » 31.12.2006 15:38

Hi,

genau da kommt

Underhill hat geschrieben:http://de.selfhtml.org/css/eigenschafte ... tm#display

zum Zuge..

Code: Alles auswählen

<html><head><title>visibility</title>
<script type="text/javascript">
function show () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "visible";
	document.getElementById("Ueberschrift").style.display = "inline";
}
function noshow () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "hidden";
	document.getElementById("Ueberschrift").style.display = "none";
}
</script>
</head><body>

<h1 id="Ueberschrift" style="visibility:hidden; display:none;">Die &Uuml;berschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<p><a href="javascript:show()">Anzeigen!</a></p>
<p><a href="javascript:noshow()">Wegmachen!</a></p>

</body></html>

Gruss
Underhill

Beitrag von **nickvergessen** » 31.12.2006 15:55

ok das hab ihc jetzt hinbekommen,
aber jetzt hab ich ein anderes Problem.
ich hab das Ding in eine Ausgabe von MySQL gebastelt.
Und wenn ich den Link anklicke, öffnet er immer den Bereich vom obersten Abschnitt:

Code: Alles auswählen

<?
    error_reporting(E_ALL);

    include 'config.php';

    $sql = "SELECT
                var
            FROM
                table;";

    $result = mysql_query($sql) OR die(mysql_error());


    while($row = mysql_fetch_assoc($result)) {

echo '<script type="text/javascript">
function show () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "visible";
   document.getElementById("Ueberschrift").style.display = "inline";
}
function noshow () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "hidden";
   document.getElementById("Ueberschrift").style.display = "none";
}
</script>
<a href="javascript:show()">blub</a><p id="Ueberschrift" style="visibility:hidden; display:none;">:<br /><textarea readonly nowrap=`nowrap` style=`font-family:MONOSPACE;` cols=`20` rows=`20`>'.htmlentities($row['var']).'</textarea><a href="javascript:noshow()">Wegmachen!</a></p>';
    }

?>

Underhill · Beitrag von **Underhill** » 31.12.2006 16:15

Hi,

ja-ne, du kannst nicht jedem Objekt den gleichen Namen(ID) geben:

Code: Alles auswählen

<? 
$var = 'holla';

echo 'Anfang<br />';

for($i = 0; $i < 5; $i++)
{

	echo '
	<script type="text/javascript">
	function show'.$i.'()
	{ 
		if (document.getElementById)
		{
			document.getElementById("Ueberschrift'.$i.'").style.visibility = "visible"; 
			document.getElementById("Ueberschrift'.$i.'").style.display = "inline"; 
		}
	}
	function noshow'.$i.'()
	{
		if (document.getElementById)
		{
			document.getElementById("Ueberschrift'.$i.'").style.visibility = "hidden"; 
			document.getElementById("Ueberschrift'.$i.'").style.display = "none";
		}
	} 
	</script>
	<a href="javascript:show'.$i.'();">'.$i.' Anzeigen</a>
	<p id="Ueberschrift'.$i.'" style="visibility:hidden; display:none;">:<br />
	<textarea readonly="readonly" nowrap="nowrap" style="font-family:MONOSPACE;" cols="20" rows="5">'.$var.$i.'</textarea>
	<br clear="all" />
	<a href="javascript:noshow'.$i.'();">'.$i.' Wegmachen!</a>
	</p>
	<br clear="all" />
	'; 

}

echo 'Ende';

?>

Gruss
Underhill

Beitrag von **nickvergessen** » 31.12.2006 16:30

hat irgendwie nicht geklappt.
kannst du mir das mal hier rein schustern?

Code: Alles auswählen

    while($row = mysql_fetch_assoc($result)) {

echo '
<script type="text/javascript">
function show () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "visible";
   document.getElementById("Ueberschrift").style.display = "inline";
}
function noshow () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "hidden";
   document.getElementById("Ueberschrift").style.display = "none";
}
</script>';

        echo '<a href="javascript:show()">code_change</a><p id="Ueberschrift" style="visibility:hidden; display:none; align:center;">:<br /><textarea readonly nowrap=`nowrap` style=`font-family:MONOSPACE;` cols=`65` rows=`20`>'.htmlentities($row['changes']).'</textarea><br /><a href="javascript:noshow()">Wegmachen!</a></p>';
    }//while

edit: ich hätte noch eine Spalte mit id aus der MySQL zur verfügung, vllt kann man die auch nehmen

Underhill · Beitrag von **Underhill** » 01.01.2007 16:25

Hi,

warum? Wo bleibt dein Ehrgeiz?

Aber bevor du das in die Jobboerse gibst,

Code: Alles auswählen

$i = $i + 1;

in der while-Schleife ist ein guter Ansatz...

Gruss
Underhill

Beitrag von **nickvergessen** » 03.01.2007 22:08

Underhill hat geschrieben:Wo bleibt dein Ehrgeiz?

ok das konnte ich nicht auf mir sitzen lassen, und siehe da:
ich habs hinbekommen. Vielen Danke für den Ansporn

Jetzt brauch ich aber noch mal deine Hilfe, gibts die Möglichkeit, alle auf einmal zuöffnen und zu schließen?