FAQ-Liste mit Akkordeon-Stil 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 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-akkordeon-stil-erstellen.gif|}}

Demo



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

#accordion {
margin: 20px 0;
}

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 instance
var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#41464D');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#528CE0');
}
});
});
</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>
<h1>FAQs</h1>
<we:ifNotEmpty match="FAQ">
<div id="accordion">
<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: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