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?

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.

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.

PHP-Code:

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.

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.

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!

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

Hier mal ein Beispiel:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<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   [B]</div></div>[/B] <div>   <a onclick="return toggle(this)" href="#">#2:Hier Name, Vorname, Titel</a>   <div style="display:none">     #2:hier der Rest   [B]</div></div>[/B] <div>   <a onclick="return toggle(this)" href="#">#3:Hier Name, Vorname, Titel</a>   <div style="display:none">     #3:hier der Rest   [B]</div></div>[/B]   </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>)

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

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

Code :

1 2 3 4 5

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

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

Zitat von nordi

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:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>

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?

PHP-Code:

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


So klappts nicht

Genauso wie vorher....

Code :

1	onclick="return toggle(this)"

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:

PHP-Code:

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>"; 


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

Ersetze die 2. Zeile hierdurch:

Code :

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

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