FAQ-Liste mit Akkordeon-Stil und Themenunterteilung erstellen



Voraussetzungen



* [[webedition:embed-frameworks:embed-javascript-frameworks:embed-mootools-javascript-framework|MooTools JavaScript framework einbinden]]

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

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.

Demo



* [[http://documentation-we.webedition.de/200807011137585352/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;
}

h3.toggler {
cursor: pointer;
border: 1px solid #F5F5F5;
border-right-color: #DDDDDD;
border-bottom-color: #DDDDDD;
font-size: 1.2em;
background: #D2E0E6;
color: #528CE0;
margin: 0 0 4px 0;
padding: 3px 5px 1px;
}

div.element {
margin: 0 0 6px 0;
padding: 6px;
}
</style>

<!-- Für MooTools benötigte JavaScript-Datei einbinden -->
<script type="text/javascript" src="/js/mootools.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
// create our Accordion instances
<we:ifNotEmpty match="FAQs">
<we:block name="FAQs">
var myAccordion<we:position type="block" format="1" reference="FAQs"/> = new Accordion($('accordion<we:position type="block" format="1" reference="FAQs"/>'), 'h3.toggler', 'div.element', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#41464D');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#528CE0');
}
});
</we:block>
</we:ifNotEmpty>
});
</script>

</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">
<div id="accordion<we:position type="block" format="1" reference="FAQs"/>">
<we:block name="FAQ">
<h3 class="toggler">
<we:input type="text" name="Question" size="50"/>
</h3>
<div class="element">
<we:textarea wysiwyg="true" name="Answer" width="300" height="100" inlineedit="false"/>
</div>
</we:block>
</div>
</we:ifNotEmpty>
</we:block>
</we:ifNotEmpty>
</we:ifNotEditmode>

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

Weiterführende Informationen



* [[webedition:embed-frameworks:embed-javascript-frameworks:embed-mootools-javascript-framework|MooTools JavaScript framework einbinden]]
* [[http://www.mootools.net/|Webseite des MooTools JavaScript framework Entwicklerteams]]
* [[http://demos.mootools.net/Accordion|MooTools Demos: Accordion]]
powered by webEdition CMS