Webentwicklung - FAQ aufbauen Prototype toggeln

Es gibt ab und an mal Momente wo ein Inhalt gekürzt dargestellt werden soll. Dort bietet es sich an einen sogenannten "toggle" einzusetzen. Also bleiben wir bei dem FAQ Beispiel wäre es wünschenswert, wenn man die Fragen einer Kategorie sieht und die entsprechenden Antworten einblenden kann. Als Beispiel nehme ich mal ein Magento Shop wo Prototype schon installiert und initialisiert ist.




Im folgenden Code unten erkennen wir, wie wir Prototype einbinden in den Quellcode. Die offizelle Webseite von Prototype wo man ebenfalls Prototype und eine sehr gute Dokumentation geboten bekommt. Im Übrigen unterstützt Prototype Ajax sehr simple und mächtig. JSON wird ebenfalls angeboten.


Da Prototype das Umschalten also toggeln bereits als Element hat ist ein Einbau sehr einfach zu gestallten. Wir bilden eine "setToggle(variable-für-id)" Javascript Function und rufen mit $(data).toggle() die entsprechende Methode auf. Das Objekt für die angebende id="meineID" wird im "style="" Tag display:none entfernt dannach wieder hinzugefügt.  Wer die toggle Dokumentation  von Prototype sehen möchte. 


<script type="text/javascript" src="magento-php-consulting.de/js/prototype/prototype.js"></script>

<script type="text/javascript">// <![CDATA[
function setToggle(data) {
   $(data).toggle();
}
// ]]></script>



<div onclick="javascript:setToggle('toggle_lieferzeit')">
<p>Wie lang ist die Lieferzeit?</p>
</div>

<div id="toggle_lieferzeit" style="display: none; ">
<p>Wir versenden sofort nach Zahlungseingang. Bei Zahlung per Rechnung versenden wir sofort nach Auftragserteilung. Zuschnitte haben eine Fertigungszeit von 1-2 Werktagen.</p>
</div>