Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht / Inhaltsangabe
Logo von kupix webdesign Internet-Agentur
  • Aktuelle Hauptseite:
  • Über uns
    • Wie Sie uns finden
    • Referenzen
      • Ref. Kompaktübersicht
      • Referenzen gruppiert
      • Nicht mehr online
      • 25 zufällige Refs.(25 aus allen Projekten)
    • Testimonials
    • Unsere Partner
    • Kontakt
    • Angebotsanfrage
    • Einzugsermächtigung
    • Barrierefreiheit
    • Detail-Infos
  • Leistungen
    • Webdesign
      • Betreuung Ihrer Webseiten
      • Web auf'm Smartphone
    • Webseiten mieten
    • Webhosting
    • Ihre Geschäftspapiere
    • SKI
      • Fragen
      • Beispiele
      • SKI bestellen
  • Aktuelle Hauptseite:TYPO3
    • Über das CMS 'TYPO3'
    • TYPO3–Qualitätskriterien
    • Was kostet TYPO3?
    • TYPO3 für Redakteure
    • TYPO3 Hochrüstung!?
    • TYPO3 Snippets
      • Slider über »Dateisammlung«
      • Text&Media–Slider
      • Text&Media Bilder aus Verzeichnis
      • Aktuelle Hauptseite:#Gridelements-Akkordeon
      • #Gridelements-Tabs
      • T3 jQuery-Zoomple
      • News-List Mini-Cards
    • TYPO3 Lernvideos
  • Service
    • Support / Fernwartung
    • Downloads
    • Was bedeutet CMS?
    • Warum ein CMS!?
    • Das CMS TYPO3
    • E-Mail-Konto einrichten
    • E-Mails sind Postkarten
    • Homepage-Validierung
  • Designelemente
    • Grids (Rasterelemente)
      • 2-Spalter
      • 3-Spalter
      • 4-Spalter
      • 5-Spalter
    • Boxen
      • Video-Box
      • Boxen nebeneinander
    • Features
      • Akkordeon
      • Akkordeon CSS
      • Bilder aus Verzeichnis (Thumbs)
      • Bilder aus Verzeichnis (Mauer)
      • Slider mit Hintergrundbildern
      • BX-Slider
      • GE Cards
      • Lupeneffekt
      • Parallax
      • Tabs
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • Tabelle aus CSV-Datei
      • News: Mini-Cards
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht / Inhaltsangabe
kupix Logo
Sie befinden sich hier: Home » TYPO3 » TYPO3 Snippets » #Gridelements-Akkordeon
TYPO3
  • Über das CMS 'TYPO3'
  • TYPO3–Qualitätskriterien
  • Was kostet TYPO3?
  • TYPO3 für Redakteure
  • TYPO3 Hochrüstung!?
  • Aktuelle Seite:TYPO3 Snippets
    • Slider über »Dateisammlung«
    • Text&Media–Slider
    • Text&Media Bilder aus Verzeichnis
    • Aktuelle Seite:#Gridelements-Akkordeon
    • #Gridelements-Tabs
    • T3 jQuery-Zoomple
    • News-List Mini-Cards
  • TYPO3 Lernvideos

T3 jQuery-Akkordeon mit Gridelements

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

Typoscript Code

Alle Gridelements wurden auf Fluid-Templates umgestellt. Demnach ist der Typoscript-Code:

//tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
//  jQuery Akkordeon
   jqaccordion < lib.gridelements.defaultGridSetup
   jqaccordion {
      cObject = FLUIDTEMPLATE
      cObject {
            file = {$tmpPath}accordion.html
              templateRootPaths.10 = fileadmin/Templates/Templates/
             partialRootPaths.10 = fileadmin/Templates/Partials/
             layoutRootPaths.10 = fileadmin/Templates/Layouts/
         settings.defaultHeaderType = {$styles.content.defaultHeaderType}
         settings.accordion = 1
        }
   }
}

// MUSS ins SETUP geschrieben werden, ganz am Schluss, da sonst Teile gelöscht werden!!!
   tt_content.gridelements_view < tt_content.gridelements_pi1

 

Weiterhin steht im Fluidtemplate "accordion.html" beispielhaft:

<script type="text/javascript">
   $(function() {
      $( ".ge-accordion" ).accordion({
         header: '> .fsc > .ce-header',
         collapsible: true,
         autoHeight: false,
         heightStyle: 'content',
         active: 0
      });
   });
</script>

<div  id="c{data.uid}" class="ge-accordion l2t{data.flexform_acc-link2top}  fsc ceLayout {data.CType}{data.layout}"
      data-role="collapsible-set"
>
   <f:render partial="Header" arguments="{_all}" />
   <f:format.raw>{data.tx_gridelements_view_column_10}</f:format.raw>
</div>

Screenshots dazu

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

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;
}

 

 

Akkordeon in einem 2. Layout

Typoscript Code

Alle Gridelements wurden auf Fluid-Templates umgestellt. Demnach ist der Typoscript-Code:

//tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
//  jQuery Akkordeon
   jqaccordion < lib.gridelements.defaultGridSetup
   jqaccordion {
      cObject = FLUIDTEMPLATE
      cObject {
            file = {$tmpPath}accordion.html
              templateRootPaths.10 = fileadmin/Templates/Templates/
             partialRootPaths.10 = fileadmin/Templates/Partials/
             layoutRootPaths.10 = fileadmin/Templates/Layouts/
         settings.defaultHeaderType = {$styles.content.defaultHeaderType}
         settings.accordion = 1
        }
   }
}

// MUSS ins SETUP geschrieben werden, ganz am Schluss, da sonst Teile gelöscht werden!!!
   tt_content.gridelements_view < tt_content.gridelements_pi1

 

Weiterhin steht im Fluidtemplate "accordion.html" beispielhaft:

<script type="text/javascript">
   $(function() {
      $( ".ge-accordion" ).accordion({
         header: '> .fsc > .ce-header',
         collapsible: true,
         autoHeight: false,
         heightStyle: 'content',
         active: 0
      });
   });
</script>

<div  id="c{data.uid}" class="ge-accordion l2t{data.flexform_acc-link2top}  fsc ceLayout {data.CType}{data.layout}"
      data-role="collapsible-set"
>
   <f:render partial="Header" arguments="{_all}" />
   <f:format.raw>{data.tx_gridelements_view_column_10}</f:format.raw>
</div>

Screenshots dazu

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

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;
}

 

 

Sondermenü
  • Impressum
  • Datenschutz
  • AGB
  • Seitenübersicht / Inhaltsangabe
  • Kontakt
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461@910111.de

 Kontaktformular

 

Geschäftszeiten

Sie erreichen uns

am Mo., Di., Mi. und Fr.
 von 10:00 bis 18:00 Uhr

und am Do.
 von 09:00 bis 12:30 Uhr

Zuletzt abgeschlossenes Projekt

23.03.2025

Forg — Einrichten und Wohnen, Jülich

Wie es so manchmal passiert:
Internetauftritt ist schon etwas älter. Erstellt mit Baukasten von IONOS und der Betreuer hat sein Wirken eingestellt.

Man konnte also keine neuen Inhalte mehr einstellen. Eile war geboten wegen veralteter Inhalte mit…

⇒ mehr

Copyright © 2007 - 2025, kupix webdesign, 52428 Jülich

kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren
Cookie optin by Olli machts