Tipps und Tricks Filter

Eine Seite zurück
Reset Filterauswahl

FAQ-Seite als Akkordeon (3.0)

In Contao 3 kann FAQ-Liste und FAQ-Leser auf der selben Seite sein. Noch einfacher gehts es mit dem Modul FAQ-Seite (FAQ-Liste und den FAQ-Leser auf derselben Seite). Um den Akkordeon Effekt hier ein zu bauen muss das Template mod_faqpage.html5 wie folgt angepasst werden:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php foreach($this->faq as $category): ?>

<article class="<?php echo $category['class']; ?>">

<h2><?php echo $category['headline']; ?></h2>
<?php foreach ($category['items'] as $faq): ?>

<section class="ce_accordion <?php echo $faq->class; ?>">
        <div class="toggler">
<h3 id="<?php echo $faq->alias; ?>"><?php echo $faq->question; ?></h3>
        </div>
        <div class="accordion">
<div class="ce_text block">
<?php if (!$faq->addBefore): ?>
<?php echo $faq->answer; ?> 
<?php endif; ?>
<?php if ($faq->addImage): ?>
<figure class="image_container<?php echo $faq->floatClass; ?>"<?php if ($faq->margin || $faq->float): ?> style="<?php echo trim($faq->margin . $faq->float); ?>"<?php endif; ?>>
<?php if ($faq->href): ?>
<a href="<?php echo $faq->href; ?>"<?php echo $faq->attributes; ?> title="<?php echo $faq->alt; ?>">
<?php endif; ?>
<img src="<?php echo $faq->src; ?>"<?php echo $faq->imgSize; ?> alt="<?php echo $faq->alt; ?>">
<?php if ($faq->href): ?>
</a>
<?php endif; ?>
<?php if ($faq->caption): ?>
<figcaption class="caption" style="width:<?php echo $faq->arrSize[0]; ?>px"><?php echo $faq->caption; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<?php if ($faq->addBefore): ?>
<?php echo $faq->answer; ?> 
<?php endif; ?>
</div>
<?php if ($faq->enclosure): ?>

<div class="enclosure">
<?php foreach ($faq->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>

<p class="info"><?php echo $faq->info; ?></p>
    </div>
</section>
<?php endforeach; ?>

<p class="toplink"><a href="<?php echo $this->request; ?>#top"><?php echo $this->topLink; ?></a></p>
</article>
<?php endforeach; ?>

</div>
<!-- indexer::continue -->

Im Seitenlayout muss dazu "moo_accordion" aktiv sein.
(Stand: Contao 3.0.3)