Artikel

  • Kaskadierte Accordeon-Effekt in Joomla-Beiträgen per Definitionslistenelemente

    Zielstellung Accordion-Feature für Joomla-Inhalte

    Die Aufgabenstellung bestand darin mit möglichst einfachen Mitteln Inhalte z.B. FAQ über ein Accordion-Feature in Joomla-Beiträge einzubinden. Es gibt zwar für Joomla fertige Plugins und Module, die das ermöglichen, jedoch haben diese diverse Einschränkungen die für mich eine Nutzung nicht infragen kommen ließen. Dazu gehört, dass ich die Akkordeon-Inhalte an beliebiger Stelle in Custom-Module oder Joomla-Beiträg einfügen wollte und diese auch kaskadierbar aufgebaut werden sollten. Weiterhin wollte ich ohne weitere Scriptbibliotheken auskommen, mich also nur auf das vorhandene jQuery stützen. Alles sollte möglichst schlank sein, so dass auch Authoren recht einfach damit Akkordeon-Inhalte erstellen können.

     

    HTML-Struktur für Akkordeon-Inhalte mit Definitionslistenelementen

    Mittels des Joomla-Content-Plugins RegularLabs ContentTemplater lassen sich fertige HTML-Template-Schnippsel in einen Beitrag per Editor-Button einfügen. Damit habe ich eine Vorlageschnipsel mit folgendem Inhalt erstellt:

     

    <dl class="accordion">
      <dt>Toggle trigger Headline</dt>
      <dd>Inhalt</dd>
    </dl>

    Also recht einfach gehalten. Die Texte sind Platzhalter damit das Editieren an der korrekten Stelle einfach erfolgen kann. Damit wird eine Akkordeon mit einem Element erzeugt.