Testtext

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.

Accordion-Howto.

Accordion

Element 1 (Einzelelement)

Blindtext

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.

»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K.

verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben.

Element 2 (Einzelelement)
Café

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.

Blindtext

»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen.

»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K.

Howto (Umschlag)

Howto

  1. Verwendet nur die vom Accordion-Modul automatisch vergebenen Klassen für CSS und JS.
  2. Das animierte Aufklapp-Icon ist eine kleine CSS3-Spielerei
  3. Anpassungen können deshalb einfach per CSS erfolgen.
// templates/j_accordion.html5
<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      animate: 800,
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
		if(ui.newHeader.length > 0) {
		  $('html, body').animate({
			scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight() - 60
		  }, 600);
		}
      }
    });
  });
</script>
/* _accordion.scss
 * Accordion mit animiertem Toggle */
.ce_accordion {
    position: relative;
    margin-bottom: 0.3rem;

    .ui-accordion-header {
        padding: 0.6rem 1rem;
        background: $bg-color;
        outline: none;
    }
    &gt; div &gt; div {
        padding: 2rem 0.5rem 0;

        h2, h3, h4, h5 {
            margin-top: 0;
        }

        blockquote {
            margin: 1rem 10% 3rem;
            font-size: 2rem;
        }
    }

    // Icon
    .ui-icon-triangle-1-s,
    .ui-icon-triangle-1-e {
        height: 26px;
        width: 26px;
        position: absolute;
        text-align: center;
        top: 0;
        right: 1rem;
        &amp;::before,
        &amp;::after {
            background-color: lighten($font-color, 27%);
            content: "";
            height: 12px;
            width: 2px;
            position: absolute;
            @include transition(all 0.25s);
        }
    }

    .ui-icon-triangle-1-e {
        &amp;::before {
            @include transform(translate(-3.6px, 12px) rotate(-45deg));
        }
        &amp;::after {
            @include transform(translate(3.6px, 12px) rotate(45deg));
        }
    }
    .ui-icon-triangle-1-s {
        &amp;::before {
            @include transform(translate(-3.6px, 12px) rotate(45deg));
        }
        &amp;::after {
            @include transform(translate(3.6px, 12px) rotate(-45deg));
        }
    }
}
Quelle (Umschlag)

Quelle

Dafür gibt es zwei Posts im Contao-Forum:
Von stefan-at-work und von Andreas

Beide Vorschläge funktionieren - Top!