FREND Components: Accordion

Einfach verwendbvare Widgets, Komponenten ohne weitere Abhängigkeiten, zugänglich Aria-kompatibel
Nicht IE8 kompatibel

  1. Accordion
  2. Tabs
  3. Off Canvas

Accordion header 1

Accordion panel 1 Überschrift

Ich bin ein Text und so schrecklich einsam. Wenn doch nur mal ein schönes Wort vorbei käme, dann würde ich sagen: "Hey du hübsches Wort, so allein heute", aber ich kenne diese geilen Luder. Diese Wörter sind doch alle gleich. Kaum gibst du ihnen einen Buchstaben, wollen sie gleich den ganzen Satz. Und willst du mal ein Komma, oder gar einen Punkt, dann reißen sie dir dein I-Tüpfelchen... aahh was wollte ich noch mal sagen? Ach ja, jetzt fällts mir wieder ein. Ich bin ein Text und so schrecklich...

Accordion header 2

Accordion panel 2 Überschrift

Mauris rhoncus commodo sapien, eu porttitor libero gravida at. Maecenas a dapibus lorem. Suspendisse fermentum neque ligula, et dapibus libero volutpat scelerisque. Cras vitae enim interdum, fringilla sapien quis, posuere purus. Morbi dictum arcu sapien, eget malesuada lorem ultricies non. Etiam tellus neque, dapibus ac rutrum ut, mollis vel nibh.

Accordion header 3

Accordion panel 3 Überschrift

Quisque facilisis fermentum ex, in iaculis felis porta et. Phasellus sapien neque, sagittis vitae erat vitae, consequat vulputate lacus. Donec sit amet mattis ipsum. Ut metus ipsum, consectetur tincidunt imperdiet sed, consequat sed urna. Morbi id feugiat magna. Nunc ut aliquet quam. Morbi auctor sapien quam. Cras lorem neque, imperdiet ut mollis non, cursus scelerisque augue.

Vorteile:

  • Absolut keine Abhängigkeiten! Kein jQuery.
  • sehr klein, ca. 4kb
  • tastaturnavigierbar, Aria compliant, zugänglich
  • destroy() und init() verfügbar, viele Options
  • Mit TAB zum Accordion springen und dann mit SPACE oder ENTER auf- oder zu klappen, mit Cursortasten zwischen Header navigieren

Nachteile:

  • Nicht IE8 kompatibel
  • Ein Haufen CSS Classes

Fazit:

  • Vewrwenden!

Quellen:

var myAccordion = Fraccordion({
	// String - Outer container selector, hook for JS init() method
	selector: '.js-fr-accordion',

	// String - Accordion header elements converted to focusable, togglable elements
	headerSelector: '.js-fr-accordion__header',

	// String - Use header id on element to tie each accordion panel to its header - see panelIdPrefix
	headerIdPrefix: 'accordion-header',

	// String - Accordion panel elements to expand/collapse
	panelSelector: '.js-fr-accordion__panel',

	// String - Use panel id on element to tie each accordion header to its panel - see headerIdPrefix
	panelIdPrefix: 'accordion-panel',

	// Boolean - If set to false, all accordion panels will be closed on init()
	firstPanelsOpenByDefault: true,

	// Boolean - If set to false, each accordion instance will only allow a single panel to be open at a time
	multiselectable: true,

	// String - Class name that will be added to the selector when the component has been initialised
	readyClass: 'fr-accordion--is-ready'
});