Und Ihr seht das jQuery-Akkordeon hier sofort im Einsatz:

Typoscript Code

Die Überschriften der einzelnen Akkordeon-Abschnitte muss in diesem Fall H3 sein in einem DIV-Container mit Klasse "kpx" (siehe Code in rot unten). Wenn ihr anders wrapt, dann den roten Teil des Codes bitte anpassen.

Der Code ist bzgl. der Gridelements-ID anzupassen:

tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
   # ID of gridelement with container-id and jQuery-Accordion
   6 < lib.gridelements.defaultGridSetup
   6 {
      columns {
         # colPos ID
         10 < .default
         10.wrap = |
      }
      wrap (
         <script type="text/javascript">
            var kkk = $.noConflict();
            kkk(function() {
               var icons = {
                  header: "ui-icon-triangle-1-e",
                  activeHeader: "ui-icon-triangle-1-s"
               };

               kkk( ".accordion" ).accordion({
                  header: 'div.kpx > h3',
                  collapsible: true,
                  heightStyle: 'content'
               });
            });
         </script>
         <div class="accordion">|</div>
      )
   }
}

 

Weiterhin sollten per Typoscript im Setup noch diese "Vereinfachungen" (ab TYPO3 V6.0.0) eingefügt werden:

A)

# *****************
# CType: text
# *****************
tt_content.text.20 {
      # um die Überschrift und den anderen Content zu trennen (wg. jQuery-Akkordeon)
      wrap = <div class="qpx_content">|</div>
}

und:

B)

lib.stdheader {
   # entfernt: <div class="csc-header csc-header-n{cObj:parentRecordNumber}">|</div>
   # und auch die HTML5-Variante "<header class='...'":
    stdWrap {
        dataWrap = |
        dataWrap {
            override = |
            override {
                if {
                    value = html5
                    equals.data = TSFE:config|config|doctype
                }
            }
        }
    }
}

 

 B) kann man auch weg lassen, wenn man im Gridelement folgendes einträgt:


                  header: 'div.kpx > h3',
+                  header: 'div.csc-header',

Das ist sogar noch besser, denn dann kann man jede Überschrift, nicht nur H3, benutzen!

Nach oben

Screenshots dazu

backend-Ansicht zum Arbeiten mit dem Gridelement fürs jQuery accordion
Backend-Ansicht
und das Ergebnis im Frontend
Frontend-Ansicht

Nach oben

bessere Darstellung CSS

Zur besseren Darstellung sollte man die jquery-ui.css einbinden. Es hilft sehr in der Standard-Darstellung

page.headerData.3123 = TEXT
page.headerData.3123.value (
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
)

Anstatt der headerData-ID 3123 könnt Ihr natürlich eine für Euch passende Ziffernfolge wählen.

 

Man kann natürlich auch sein eigenes CSS kreiieren, so wie wir hier.
Ausschnitt aus unserer CSS zum jQuery-Accordion:

/* jQuery ACCORDION */
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    outline:none;                   /* damit die gepunkteten Linien z.B. beim FF verschwinden */
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em !important;
}
.ui-accordion .ui-accordion-noicons {
    padding-left: .7em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

.ui-state-default .ui-icon {
    background-image: url(../images/ui-icons.png);
   width:16px;
   height:16px;
}
.ui-icon-triangle-1-e { background-position:0 -192px; }
.ui-icon-triangle-1-s { background-position:-16px -192px; }

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 8px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 8px;
}
.ui-accordion-header-active {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.ui-accordion-content-active {
    border: 1px solid #aaa;
}

 

 

 

Nach oben