Einfache FAQ-Liste erstellen

Das folgende Beispiel zeigt Ihnen, wie Sie eine einfache FAQ-Liste erstellen.

Dabei werden im oberen Teil der Seite nur die Fragen ausgegeben. Im unteren Teil der Seite wird die Liste mit den Frage/Antwort-Paaren ausgegeben. Klickt der Besucher auf eine Frage in der oberen Liste, springt die Anzeige im Browser auf das entsprechende Frage/Antwort-Paar in der unteren Liste.

Quellcode

<html>
<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-Questions {
margin: 0;
padding: 0;
}

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

ul.FAQ li {
margin: 5px 0 5px 0;
padding: 5px 0 5px 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>
</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>
<h1>FAQs</h1>
<we:ifNotEmpty match="FAQ">
<ul class="FAQ-Questions">
<we:block name="FAQ">
<we:ifNotEmpty match="Question">
<li>
<a href="#Item<we:position type="block" format="1" reference="FAQ"/>">
<we:input type="text" name="Question" size="50"/>
</a>
</li>
</we:ifNotEmpty>
</we:block>
</ul>

<ul class="FAQ">
<we:block name="FAQ">
<we:ifNotEmpty match="Question">
<li id="Item<we:position type="block" format="1" reference="FAQ"/>">
<div class="Question">
<we:input type="text" name="Question" size="50"/>
</div>
<we:textarea wysiwyg="true" name="Answer" width="300" height="100" inlineedit="false"/>
</li>
</we:ifNotEmpty>
</we:block>
</ul>
</we:ifNotEmpty>
</we:ifNotEditmode>

</body>
</html>