FAQ-Liste mit Ein- und Ausrollfunktion erstellen



Voraussetzungen



* [[webedition:code-examples:creating-faq-lists:script.aculo.us-javascript-framework-einbinden]]

Das folgende Beispiel zeigt Ihnen, wie Sie eine FAQ-Liste mit Aus-und Einrollfunktion erstellen.

Dabei sind zunächst nur die Fragen sichtbar. Klickt der Besucher der Webseite auf eine Frage, wird die dazugehörige Antwort direkt unter der Frage eingeblendet. Eine eventuell bereits geöffnete andere Antwort wird ausgeblendet.

Die Funktionalität zum Ein- und Ausrollen der Antworten wird über JavaScript realisiert. Ist beim Besucher der Webseite JavaScript im Browser deaktiviert, sind alle Antworten eingeblendet.

Screenshot



{{:de:webedition:code-examples:creating-faq-lists:faq-liste-mit-ein-und-ausrollfunktion-erstellen.gif|}}

Demo



* [[http://documentation-we.webedition.de/200806190827159953/index.html|Online-Demo öffnen]]

Quellcode



<code html>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<we:title></we:title>
<we:description/>
<we:keywords/>
<we:charset defined="UTF-8">UTF-8</we:charset>
<we:ifNotEditmode>
<style type="text/css">
html {
font-family: arial;
font-size: .8em;
color: #000000;
}

a {
color: #000000;
}

ul.FAQ {
margin: 0;
padding: 0;
}

ul.FAQ li {
margin: 5px 0 5px 0;
padding: 5px 0 5x 0;
list-style: none;
}

ul.FAQ li div.Question {
display: block;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px dotted #97C323;
font-weight: bold;
}
</style>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>
<script src="/js/effects.js" type="text/javascript"></script>
<script src="/js/builder.js" type="text/javascript"></script>
<script type="text/javascript">
selectedItem = 0;

// Frage-Link erstellen
function createQuestion(itemNr, questionText) {
a = Builder.node('a', {href: '#', onclick: 'openAnswer('+itemNr+'); selectedItem = '+itemNr+'; return false;'}, questionText);
$('Question'+itemNr).appendChild(a);
}

// Antwort öffnen
function openAnswer(itemNr) {
// Geöffnete Antwort schließen
if (selectedItem != 0) {
Effect.BlindUp(String('Answer'+selectedItem), {duration: 0.5});
}

// Angeforderte Antwort öffnen
Effect.BlindDown('Answer'+itemNr, {duration: 0.5});
}
</script>
</we:ifNotEditmode>
</head>
<body>

<!--
Dieser Bereich ist nur für den Redakteur innerhalb
der Ansicht Bearbeiten sichtbar.
-->
<we:ifEditmode>
<ul>
<we:block name="FAQ">
<li>
<we:input type="text" name="Question" size="50"/>
<we:textarea wysiwyg="true" name="Answer" width="300" height="100" inlineedit="false"/>
<br />
</li>
</we:block>
</ul>
</we:ifEditmode>

<!-- Dieser Bereich ist nicht in der Ansicht Bearbeiten sichtbar. -->
<we:ifNotEditmode>
<we:ifNotEmpty match="FAQ">
<ul class="FAQ">
<we:block name="FAQ">
<we:ifNotEmpty match="Question">
<li>
<div class="Question" id="Question<we:position type="block" format="1" reference="FAQ"/>">
<!-- Wenn JavaScript im Browser aktiviert ist... -->
<script type="text/javascript">
itemNr = <we:position type="block" format="1" reference="FAQ"/>;
questionText = '<we:input type="text" name="Question" size="50"/>';
// Frage mit Link erzeugen und einfügen
createQuestion(itemNr, questionText);
</script>
<!-- Wenn JavaScript im Browser NICHT aktiviert ist... -->
<noscript>
<we:input type="text" name="Question" size="50"/>
</noscript>
</div>
<div class="Answer" id="Answer<we:position type="block" format="1" reference="FAQ"/>">
<we:textarea wysiwyg="true" name="Answer" width="300" height="100" inlineedit="false"/>
</div>
<script type="text/javascript">
// Antwort ausblenden
// Mit JavaScript realisiert, da das Einblenden auch nur mit JavaScript funktioniert.
$('Answer'+itemNr).setStyle({
display: 'none'
});
</script>
</li>
</we:ifNotEmpty>
</we:block>
</ul>
</we:ifNotEmpty>
</we:ifNotEditmode>

</body>
</html>
</code>

Weiterführende Informationen



* [[webedition:code-examples:creating-faq-lists:script.aculo.us-javascript-framework-einbinden]]
* [[http://script.aculo.us/|script.aculo.us Website]]
powered by webEdition CMS