Einfache FAQ-Liste mit Themenaufteilung erstellen



Das folgende Beispiel zeigt Ihnen, wie Sie eine einfache FAQ-Liste mit Themenaufteilung 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. Die Frage/Antwort-Paare werden zu Themen gruppiert.

Demo



* [[http://documentation-we.webedition.de/200807011439376680/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-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 Dokumentenansicht Bearbeiten sichtbar.
-->
<we:ifEditmode>
<ul style="margin: 0; padding: 0;">
<we:block name="FAQs">
<li style="list-style: none; padding: 10px; margin-top: 5px; border: 1px solid #006DB8;">
Thema:
<we:input type="text" name="Topic" size="40"/>
<br /><br />
<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>
</li>
<br />
</we:block>
</ul>
</we:ifEditmode>

<!-- Dieser Bereich ist nicht in der Dokumentenansicht Bearbeiten sichtbar. -->
<we:ifNotEditmode>
<h1>FAQs</h1>
<we:ifNotEmpty match="FAQs">
<we:block name="FAQs">
<h2>
<we:input type="text" name="Topic" size="40"/>
</h2>
<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="FAQs"/>_<we:position type="block" format="1" reference="FAQ"/>">
<we:input type="text" name="Question" size="50"/>
</a>
</li>
</we:ifNotEmpty>
</we:block>
</ul>
</we:ifNotEmpty>
</we:block>
</we:ifNotEmpty>

<we:ifNotEmpty match="FAQs">
<we:block name="FAQs">
<h2>
<we:input type="text" name="Topic" size="40"/>
</h2>
<we:ifNotEmpty match="FAQ">
<ul class="FAQ">
<we:block name="FAQ">
<we:ifNotEmpty match="Question">
<li id="Item<we:position type="block" format="1" reference="FAQs"/>_<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:block>
</we:ifNotEmpty>
</we:ifNotEditmode>

</body>
</html>
</code>
powered by webEdition CMS