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 Liste über Dokumente (''[[:de:webedition:tag-reference:listview-type-document|<we:listview type="document">]]'') mit Akkordeon-Stil erstellen.

Dabei sind zunächst nur die Überschriften sichtbar. Klickt der Besucher der Webseite auf eine Überschrift, wird die dazugehörige Teaser-Text direkt unter der Überschrift eingeblendet. Ein eventuell bereits geöffneter Teaser-Text wird ausgeblendet.

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

Demo



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

Quellcode



<box 100% round blue|index.tmpl - Vorlage der webEdition-Seite "index.php">
<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;
}

blockquote {
padding: 5px 20px;
}
</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>

<h1>Einträge</h1>
<we:listview type="document" name="Overview" doctype="Entry">
<div id="accordion">
<we:repeat>
<h3 class="toggler">
<we:field type="text" name="Headline"/>
</h3>
<div class="element">
<we:field type="text" name="Teaser"/>
<br /><br />
<a href="<we:field name="we_path"/>">
Weitere Informationen zum Thema
<em>
<we:field type="text" name="Headline"/>
</em>
</a>
</div>
</we:repeat>
</div>
</we:listview>

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

<box 100% round blue|entry.tmpl - Vorlage für die Einträge die aufgelistet werden>
<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;
}
</style>
</we:ifNotEditmode>
</head>
<body>

<we:ifEditmode>
Überschrift:
<br />
</we:ifEditmode>
<h1><we:input type="text" name="Headline" size="40"/></h1>

<we:ifEditmode>
Teaser:
<br />
<we:textarea wysiwyg="true" name="Teaser" width="500" height="100" inlineedit="true"/>
</we:ifEditmode>

<we:ifEditmode>
<br /><br />
Text:
<br />
</we:ifEditmode>
<we:textarea wysiwyg="true" name="Text" width="500" height="300" inlineedit="true"/>

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

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]]
powered by webEdition CMS