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

Expired

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.

 

Beispiel einer kaskadierten Struktur und mehrere Accordeons pro Beitrag

Der Vorteil der nachfolgend beschriebenen Scripte ist, dass diese auch kaskadierbar verwendet werden kann. D.h. ein Akkordeon-Element-Inhalt kann wiederrum 1 oder mehrere Unter-Akkordeon-Elemente enthalten. So sieht z.B. ein 3fach kaskadiertes Beispielscript aus. Auch das läßt sich mit den ContentTemplater einfach erreichen, in dem einfach der Textcursor immer in den Inhaltsbereich gesetzt wird, der die weiteren Akkordeon-Element aufnehmen soll und erneut der "Inhalt-Template"-Button betätigt wird, um eine Vorlage einzufügen.

<dl class="accordion">
  <dt>Toggle trigger Headline</dt>
  <dd>Inhalt
    <dl class="accordion">
      <dt>Toggle trigger Headline</dt>
      <dd>Inhalt</dd>
    </dl>
    <dl>
      <dt>Toggle trigger Headline</dt>
      <dd>Inhalt</dd>
    </dl>
    <dl class="accordion">
      <dt>Toggle trigger Headline</dt>
      <dd>Inhalt
        <dl class="accordion">
          <dt>Toggle trigger Headline</dt>
          <dd>Inhalt</dd>
        </dl>
      </dd>
    </dl>
  </dd>
</dl>
<p>Hier kommt das nächste Accordeon:</p>
<dl class="accordion">
  <dt>Toggle trigger Headline</dt>
  <dd>Inhalt</dd>
</dl>

 

css-Styles per SASS/SCSS/LESS

 

dl.accordion {
  margin: 1rem 0;
  list-style: none;
  padding: 0;

  // entspricht .inner
  dd {
    padding-left: 1em;
    overflow: hidden;
    display: none;

    &.show {
      /* display: block; */
    }
  }

  // entspricht li a.toggle
  dt {
    margin-top: 1rem;
    cursor: pointer;
    width: 100%;
    display: block;
    background: rgba($accent-color-2,0.7);
    color: $accent-color-1;
    padding: .75em;
    border-radius: 0.15em;
    @include transition(background .3s ease);

    &:hover {
      background: rgba($accent-color-2, 1);
    }
  }

  .faicon {
    color: $accent-color-1;
    vertical-align: -5px;
    margin-right: 5px;
  }
  dt > span > i.fa {
    @include transition(.1s ease);
    display: inline-block;
    width: 27px;
    height: 27px;
    font-size: 28px;
    text-align: center;
  }
  dt.show > span > i.fa {
    @include transform(rotate(45deg));
  }
}

 

 

jQuery-JavaScript zum Tooglen der Akkordeon-Elemente

 

jQuery('dl.accordion dt').click(function(e) {
    e.preventDefault();

    var $this = jQuery(this);

    // wenn aktiv
    if ($this.hasClass('show')) {
        $this.parent().children().removeClass('show');
        $this.next().slideUp(350);
    // wenn nicht aktiv
    } else {
        $this.parent().find('dd, dt').removeClass('show');
        $this.parent().find('dd').slideUp(350);
        $this.toggleClass('show');
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

jQuery(document).ready(function(jQuery) {
    jQuery('dl.accordion dt').prepend('<span class="faicon"><i class="fa fa-plus-circle"></i></span>');
});

  

Links zum Thema

Diese Links dienten teilweise als Quelle für das oben aufgeführte Knowhow.