# Aufklappbares Infofenster?



## nordi (1. Dezember 2009)

Hallo Leute,

ich habe eine Idee aber weiß nicht wirklich, wie ich die verwirklichen soll. Ich habe eine Liste, die durch eine Mysqldatenbank generiert wird. In der Datenbank sind verschiedene Informationen abgespeichert (circa 10). Die wär zu viel, um dies in der Liste wiederzugeben. Deswegen wird in der Liste nur Name und Titel der Dokumente angezeigt. Ich würde gern nun, wenn man auf den Namen/Titel klickt, dass ein kleines Feld aufklappt, wo die restlichen Informationen angezeigt werden mit dem Downloadlink des Dokumentes. Ich weiß noch nicht mal, ob das hier das richtige Forum ist  Also quasi bei "onclick" -> Menü runterklappen.

Gibt es dafür vllt. Tutorials oder Beispielseiten?


----------



## Sven Mintel (2. Dezember 2009)

Moin nordi,

du schreibst, die Liste ist zu lang...wieviel Daten enthält sie denn so(in Bytes)?

Weshalb ich frage: vom Umfang der Daten ist es anhängig, ob man die Daten gleich lädt und erstmal verbirgt, oder ob man die Daten erst bei Bedarf nachlädt.


----------



## nordi (2. Dezember 2009)

Hey, also in der Datenbank sind Sachen abgespeichert wie "Name, Vorname, Titel, Seminarthema etc".. also nur Text - sollte nicht viel sein. Also das hier ist jetzt der PHP-Teil, wo der Link ausgegeben wird, auf den mal nachher mal klicken soll, wo dann das "Aufklappmenü" runterfahren soll.


```
echo "<p>";
while ($row = mysql_fetch_object($result)) { 
echo "<span class=\"semester\">".$row->semester."</span> – <a href=\"".$PHP_SELF."?id=".$row->id."\"><strong>".$row->refnachname.", ".$row->refvorname.":</strong> ".$row->titel."</a><br />"; 
}
echo "</p>";
```

Ich weiß jetzt nicht, ob ihr/du etwas mit anfangen könnt.


----------



## Sven Mintel (2. Dezember 2009)

Und das, was dann ausklappen soll, ist nur das Seminarthema?


Falls ja...da würde ich schon eingangs alles Laden, das Thema direkt nach dem Link in einem versteckten Container ausgeben...und beim Klick auf den Link diesen Container anzeigen.


----------



## nordi (2. Dezember 2009)

Ja, da kommen vielleicht noch ein, zwei Sachen dazu! Ich weiß aber nicht genau, wie man das macht mit den Containern.. hast du evtl einen Link für mich? Vielen Dank schonmal für deine Hilfe!


----------



## Sven Mintel (2. Dezember 2009)

Das ist eigentlich halbsowild...man muss per JS nur die style-Eigenschaft diplay ändern.

Hier mal ein Beispiel:

```
<script type="text/javascript">
function toggle(o)
{
  o.parentNode.lastChild.style.display=
    (o.parentNode.lastChild.style.display=='none')
      ?'block'
      :'none';
   return false;
}
</script>
<div>
  <a onclick="return toggle(this)" href="#">#1:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #1:hier der Rest
  </div></div>
<div>
  <a onclick="return toggle(this)" href="#">#2:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #2:hier der Rest
  </div></div>
<div>
  <a onclick="return toggle(this)" href="#">#3:Hier Name, Vorname, Titel</a>
  <div style="display:none">
    #3:hier der Rest
  </div></div>

</body>
```

Das innere <div> ist per display:none erstmal versteckt.
Beim Klick auf den Link wird eine Funktion aufgerufen(mit einem Zeiger auf den geklickten Link als Argument)

Die Funktion geht erst zum Elternknoten des Links(parentNode)....dann zu dessen letztem Kindknoten(lastChild) und ändert dessen display...das wars.

(Beachte, dass zwischen den beiden schliessenden </div>-Tags kein Leerzeichen/Zeilenunmbruch etc. steht...würde dort etwas stehen, wäre dies der letzte Kindknoten, und nicht das innere <div>)


----------



## nordi (2. Dezember 2009)

Ah super, hab es in den PHP-Code eingebaut und klappt super! Gibt es auch eine Möglichkeit, dass sich das Infofenster wieder schließt, wenn mein anderes aus der Liste öffnet? 

Kann man dieses <div> auch evtl. animieren, dass es langsam runterfährt oder so? Ich weiß.. aber träumen darf man doch


----------



## Sven Mintel (2. Dezember 2009)

Was das ausblenden des anderen angeht, füge folgendes am Anfang der Funktion ein:

```
if(window.currentInfo && window.currentInfo!=o)
  {
    window.currentInfo.parentNode.lastChild.style.display='none';
  }
  window.currentInfo=o;
```

Betreffs der Animation würde ich eine fertige Lösung empfehlen, wie bspw:
http://docs.jquery.com/Effects/slideToggle#demo


----------



## nordi (2. Dezember 2009)

Dank dir!! Ich probier das gleich alles mal aus! Kann man evtl. den Link im Tutorial nicht als Button machen sondern als normalen Textlink?


----------



## Sven Mintel (2. Dezember 2009)

nordi hat gesagt.:


> Kann man evtl. den Link im Tutorial nicht als Button machen sondern als normalen Textlink?



Klar, das kann man mit jedem Element machen

Würde bspw. so gehen:

```
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggle(o)
{
  if(window.currentInfo && window.currentInfo!=o)
  {
    $(window.currentInfo).next().stop().slideToggle('slow');
  }
  $(o).next().stop().slideToggle('slow');
  window.currentInfo=o;
  return false;
}
</script>
```


----------



## nordi (3. Dezember 2009)

Hi, wie spreche ich denn die Funktion als Link an? Auch wieder mit "onclick", richtig? Ich bekomm da irgendwie nicht ganz die Verbindung von der Funktion oben zum Link hin.. die Funktion heißt ja "currentInfo".. aber wie sprech ich die jetzt an?


```
<a onclick=\"window.currentInfo\" href=\"#\"><strong>".$row->refnachname.", ".$row->refvorname.":</strong> ".$row->titel."</a>
```

So klappts nicht


----------



## Sven Mintel (3. Dezember 2009)

Genauso wie vorher....


```
onclick="return toggle(this)"
```


----------



## nordi (3. Dezember 2009)

Hi, genauso hatte ich es auch am Anfang ausprobiert. Aber das klappt bei mir nicht. Liegt das daran, weil der Inhalt, der ausgeklappt wird, sich in einem <div> befindet und nicht in einem <p> wie im Beispiel auf der Seite. Ich weiß, ich sollte hier keinen PHP-Code posten, aber mach es trotzdem mal  Wenn es nicht durchschaubar ist, dann schreib ich es schnell in HTML um:


```
echo "<div>";
echo "<p class=\"essay\"><span class=\"semester\">".$row->semester."</span> – <a onclick=\"return toggle(this)\" href=\"#\"><strong>".$row->refnachname.", ".$row->refvorname.":</strong> ".$row->titel."</a></p>"; 
echo "<div class=\"infobox\" style=\"display: none;\">";
echo "<p class=\"info\"><span class=\"dropdownhead\">Genauere Informationen zum Dokument:</span></p>";
echo "<p style=\"padding-left: 18px;\">Seminarthema: ".$row->seminarthema."<br />";
echo "Dozent: ".$row->doznachname.", ".$row->dozvorname."<br />";
echo "Typ: ".$row->typ."<br />";
echo "Note: ".$row->note."<br />";
echo "<p class=\"download\"><a href=\"".$PHP_SELF."?id=".$row->id."\">Download</a></p>";
echo "</div></div>";
```


----------



## Sven Mintel (3. Dezember 2009)

Das Problem ist, dass der Link kein direktes Kinddelement des <div> ist...das versteckte <div> wird so nicht gefunden.

Ersetze die 2. Zeile hierdurch:


```
echo "<p onclick=\"return toggle(this)\" class=\"essay\"><span class=\"semester\">".$row->semester."</span> – <strong>".$row->refnachname.", ".$row->refvorname.":</strong> ".$row->titel."</p>";
```


----------



## nordi (3. Dezember 2009)

hab ich ersetzt und nun wird aber kein Link mehr angezeigt!? Ist quasi nur Text ohne Verlinkung.


----------



## Sven Mintel (4. Dezember 2009)

Es war vorher auch nur ein Link zu einem nicht existenten Ankerpunkt.
Eine Unterstreichung und den entsprechenden Cursor kann man auch per CSS erzeugen.


----------



## nordi (4. Dezember 2009)

Oh mann!  Ich hab noch nicht mal probiert drauf zu klicken, weil ich den CSS-Hovereffekt so gewöhnt war  Fährt wunderbar runter, wie im Beispiel - vielen Dank für die Hilfe!! Schönes Wochenende wünsche ich!


----------



## nordi (4. Dezember 2009)

Hi, ich nochmal  Ich weiß nicht, ob ich doch was falsch gemacht habe oder ob ich da einen Fehler gefunden habe. Also wie gesagt, das Fenster zum runterfahren klappt wunderbar, aber nun zum "Fehler":

Wenn ich auf den "link" klicke -> Fenster fährt runter -> Klicke nochmal auf den Link -> Fenster fährt wieder hoch (Alles wunderbar)

Klicke ich nun auf den nächsten Link der Liste, fährt einmal das Fenster von oben mit runter und das Fenster, was eigentlich runterfahren sollte..

Hier der Link, um das mal anschaulicher zu machen.

http://www.stokedesign.de/handouts/liste.php

Ich weiß jetzt nicht genau, wie das läuft mit dem toggle, weil ich JS nicht so gut kenne. Aber in dem onclick-Befehl steht ja toggle(this), um das eindeutiger zu machen, damit nur das eine Fenster auf/hochfährt,  müsste man da nicht die id aus der Datenbank übernehmen? also irgendwie toggle($id) oder sowas? Kann sein, dass das absoluter Schmarn ist, was ich hier schreibe - aber wär aus meiner Sicht logisch


----------



## nordi (6. Dezember 2009)

Mh.. ich will den Beitrag jetzt hier nicht puschen oder sowas, aber ich finde den Fehler einfach nicht im Skript?! WÄre super, wenn jmd. von euch da nochmal reingucken kÖnnte, wenn nicht, dann lass ich das jetzt ruhen und probier was neues aus  SchÖnen Sonntag!!


----------



## weedo (6. Dezember 2009)

Hi,

bei deinem Problem kann ich dir leider nicht helfen, jedoch ist mir auch ein Fehler aufgefallen.

Ist man etwas nervöser und man klickt versehentlich mit einem Doppelklick auf den Link, dann öffnet er sich nur ein spalt, wenn man ihn mit einem Singleklick wieder versucht zu öffnen.

lg weedo


----------



## nordi (6. Dezember 2009)

Oh ja, danke! Hatte ich noch nicht gesehen.. liegt das alles an diesen CSS/PHP-Verschachtelungen oder ist das Skript fehlerhaft?


----------



## weedo (16. Januar 2010)

Hi,

Ich muss das Thema leider nochmal aufwärmen. Ich wollte gerne dieses Script in meiner Seite verwenden, jedoch klappt das alles nicht so, wie ich mir das vorstelle.

Hier erstmal der Code, der auf der seite http://www.mee-clan.de/tutorials-de/ eingesetzt ist:


```
<html>
<head>
<title>Unbenannt-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toggle(o)
{
  if(window.currentInfo && window.currentInfo!=o)
  {
    $(window.currentInfo).next().stop().slideToggle('slow');
  }
  $(o).next().stop().slideToggle('slow');
  window.currentInfo=o;
  return false;
}
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tabelle_01" width="801" height="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
			<img src="Bilder/index_01.gif" width="791" height="6" alt=""></td>
		<td>
			<img src="Bilder/index_02.gif" width="9" height="6" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td rowspan="9">
			<img src="Bilder/index_03.gif" width="9" height="587" alt=""></td>
		<td rowspan="2"></td>
		<td rowspan="2">
			<img src="Bilder/index_05.gif" width="468" height="146" alt=""></td>
		<td>Impressum | AGB | Sitemap</td>
		<td rowspan="10">
			<img src="Bilder/index_07.gif" width="9" height="588" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="56" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/index_08.gif" width="192" height="90" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="90" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="6" valign="bottom"  background="Bilder/index_09.gif">
    <div>
      <a onclick="return toggle(this)" href="#"><img src="Bilder/index_10.gif" width="782" height="27" alt="" border="0"></a>	  
      <div style="display:none; height: 305px; background-color: #097aaf; color: #FFFFFF;">
        #1:hier der Rest
      </div></div>
      <div>
      <a onclick="return toggle(this)" href="#"><img src="Bilder/index_11.gif" width="782" height="27" alt="" border="0"></a>	  
      <div style="display:none; height: 305px; background-color: #1f8abd; color: #FFFFFF;">
        #2:hier der Rest
      </div></div>
      <div>
      <a onclick="return toggle(this)" href="#"><img src="Bilder/index_12.gif" width="782" height="27" alt="" border="0"></a>
      <div style="display:none; height: 305px; background-color: #4ea2c8; color: #FFFFFF;">
        #3:hier der Rest
      </div></div>
      <div>
      <a onclick="return toggle(this)" href="#"><img src="Bilder/index_13.gif" width="782" height="27" alt="" border="0"></a>	  
      <div style="display:none; height: 305px; background-color: #64bce6; color: #FFFFFF;">
        #4:hier der Rest
      </div></div>
      <div>
      <a onclick="return toggle(this)" href="#"><img src="Bilder/index_14.gif" width="782" height="27" alt="" border="0"></a>
      <kontakt style="display:none; height: 305px; background-color: #85d5fb; color: #FFFFFF;">
        #5:hier der Rest
      </kontakt></div>
    </td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="305" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="Bilder/index_15.gif" width="782" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="Bilder/index_16.gif" width="9" height="7" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="Bilder/index_17.gif" width="782" height="7" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/index_18.gif" width="9" height="6" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="1" height="6" alt=""></td>
	</tr>
</table>
</body>
</html>
```

Als erstes wollte ich gerne, dass der Menüpunkt bei betreten der Seite aufgeklappt wird. Nach vielem rumdoktoren, hab ich es geschafft, das er immer auf blieb, immer mit allen anderen aufging oder sonstiges dergleichen. Deshalb möchte ich euch dort um Rat bitten.

Als zweites ist mir aufgefallen, dass wenn ich auf den ersten Link zwei mal klicke, so dass sich das Fenster öffnet und dann wieder schließt, und ich einen anderen Menüpunkt wähle, sich beide Fenster öffnen. Wie bekomme ich das weg?

Und zu guter Letzt ist mir aufgefallen, dass wenn ich doppelt auf einen Menüpunkt klicke und danach wieder auf den selben klicke, dass er sich lediglich einen Spalt öffnet.

Das alles sind Fehler, die ich, so gern ich es auch wollte, nicht selber beheben kann. Ich hoffe, dass ihr mir helfen werdet.

Lg weedo


----------

