Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
Logo von kupix webdesign Internet-Agentur
  • Aktuelle Hauptseite:
  • Über uns
    • Wie Sie uns finden
    • Referenzen
      • Ref. Kompaktübersicht
      • Referenzen gruppiert
      • Nicht mehr online
    • Testimonials
    • Unsere Partner
    • Kontakt
    • Angebotsanfrage
    • Einzugsermächtigung
    • Barrierefreiheit
    • Detail-Infos
  • Leistungen
    • Webdesign
      • Betreuung Ihrer Webseiten
      • Web auf'm Smartphone
      • One-Pager
    • 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
      • Eigenes Inhaltselement (CType)
      • MASK-Akkordeon
      • MASK-Tabs
      • MASK-Multicolumn
      • 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
    • 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 (news)
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • News: Mini-Cards
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
kupix Logo
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
    • Eigenes Inhaltselement (CType)
    • MASK-Akkordeon
    • MASK-Tabs
    • MASK-Multicolumn
    • 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
  • Kontakt
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461.xxx@keinSpam.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
Langerweher Tafel ab 01.01.2023

01.01.2023

Langerweher Tafel, ab 2023 im Corporate Design der Tafel Deutschland

Ein Upgrade von TYPO3 V4 auf die aktuellste V11 haben wir am 25. Jan. 2022 durchgezogen!

⇒ mehr

Copyright © 2007 - 2023, kupix webdesign, 52428 Jülich
kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren