ACCORDION-USAGE (Standard Module )

src/app/shared/components/accordion/templates

Demo Section

Each variation will be presented in the following section.

Simple Accordion

Item 1

Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:

  • Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder
  • Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder

Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.

  • Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder
  • Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.
3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.Ablauf des FeststellungsverfahrensSobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.

test2

test dann infobox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.

test hier weiterer Inhalt in einem P

  • Hier dann Punkt 1
  • Hier dann Punkt 2 mit SUB
    • Hier dann sub1
    • Hier dann sub2
Item 2

Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:

  • Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder
  • Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder

Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.

  • Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder
  • Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.
3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.Ablauf des FeststellungsverfahrensSobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.

test2

test dann infobox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.

test hier weiterer Inhalt in einem P

  • Hier dann Punkt 1
  • Hier dann Punkt 2 mit SUB
    • Hier dann sub1
    • Hier dann sub2

Single Open Accordion with Default Openings

Item 1

Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:

  • Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder
  • Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder

Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.

  • Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder
  • Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.
3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.Ablauf des FeststellungsverfahrensSobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.

test2

test dann infobox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.

test hier weiterer Inhalt in einem P

  • Hier dann Punkt 1
  • Hier dann Punkt 2 mit SUB
    • Hier dann sub1
    • Hier dann sub2
Item 2

Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:

  • Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder
  • Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder

Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.

  • Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder
  • Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.
3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.Ablauf des FeststellungsverfahrensSobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.

test2

test dann infobox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.

test hier weiterer Inhalt in einem P

  • Hier dann Punkt 1
  • Hier dann Punkt 2 mit SUB
    • Hier dann sub1
    • Hier dann sub2

Readme

Accordion

Description

The component represents a simple accordion with transitions and max-height.

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

The accordion is based on the blueprint of Veams-Components and is a wrap-with component to support flexible content with predefined surrounded markup.

The accordion is jQuery-free (we use Veams-Query) and contains some accessiblity functionality.

JIRA

Requirements

Installation

Installation with Veams

veams install component accordion

veams -i c accordion

Fields

accordion-usage.hbs

The partial is a {{#wrapWith}} helper. Documentation for wrapWith helper.

accordion.hbs

Settings

Parameter Type Default Description
settings.accContextClass String 'default' Context class of component
settings.accClasses String '' Modifier classes for component
settings.accJsOptions Object null JavaScript options which gets stringified

accordion__item.hbs

Settings

Parameter Type Description
settings.accNoWrapper Boolean Hide wrapper div .accordion__item
Parameter Type Description
accItemId String Id of the accordion item
accButton String Button text for accordion item

JavaScript Options

The module gives you the possibility to override default options:

Option Type Default Description
classes.activeClass String 'is-active' Define the active class for active elements
classes.calculatingClass String 'is-calculating' Define the calculating class for the initial calculation cycle
classes.closeClass String 'is-closed' Define the closing class for accordion content items
classes.openClass Boolean 'is-open' Define the opening class for accordion content items
classes.unresolvedClass String 'is-unresolved' Define the unresolved class for the whole accordion which will be deleted after didMount() and render() is finished
clickHandler String 'click' Define a click handler for the buttons
dataMaxAttr String 'data-js-height' Define the attribute in which the calculated height is saved
openAllOnInit Boolean false If set to true, all panels stays open on render
openByHash Boolean false If set to true, panel can be opened by url hash referencing the id of the panel
openIndex Number null Index of panel to be opened on init (zero based)
openOnViewports Array ['tablet-s', 'tablet-l', 'desktop-s', 'desktop-m', 'desktop-l'] Viewports on which the openIndex panel is opened on init
removeStyles Boolean false If set to true,
selectors.accordionBtn String '[data-js-item='accordion-btn']' Define the element for accordion buttons
selectors.accordionContent String '[data-js-item="accordion-content"]' Define the element for accordion content items
singleOpen Boolean false If set to true, only one panel can be opened at the same time
tabMode Boolean false If set to true, the accordion behaves like a tab module (clicking on active button will not close the corresponding panel)

Sass Options

There are multiple global variables which you can change:

Variable Default Description
$accordion-toggle-duration 300ms !default Speed of toggling
$accordion-transition-method ease !default Transition method of toggle effect
$accordion-icon-color #666 !default + icon color
$accordion-icon-width 15px !default + icon width
$accordion-icon-height 2px !default + icon height
$accordion-btn-color $accordion-icon-color !default Accordion button color
$accordion-btn-bg-color rgba(255, 255, 255, .5) !default Background color of the accordion button
$accordion-padding 1rem !default Default padding which will be used in the accordion

Templates

accordion-usage.hbs

{{! WrapWith START: Accordion }}
{{#wrapWith "accordion" settings=this.settings}}
{{! WrapWith START: Item }}
	{{#each content.items}}
		{{#wrapWith "accordion__item" accItemId=this.itemId accButton=itemBtnText}}
			<p>Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:</p><ul><li>Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder</li><li>Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder</li></ul><p>Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.<ul><li>Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder</li><li>Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.</li></ul>3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.<b>Ablauf des Feststellungsverfahrens</b>Sobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.</p><p>test2</p><p><span class="infobox"><span class="infobox-icon"></span>test dann infobox</span></p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.</p><p>test hier weiterer Inhalt in einem P</p>
			<ul>
				<li>Hier dann Punkt 1</li>
				<li>Hier dann Punkt 2 mit SUB
					<ul>
						<li>Hier dann sub1</li>
						<li>Hier dann sub2</li>
					</ul>
				</li>
			</ul>
		{{/wrapWith}}
	{{/each}}
{{! WrapWith END: Item }}
{{/wrapWith}}
{{! WrapWith END: Accordion }}

accordion.hbs

<div class="c-accordion{{#if options.settings.accContextClass}}--{{options.settings.accContextClass}}{{else}}--default{{/if}}{{#if options.settings.accClasses}} {{options.settings.accClasses}}{{/if}}"
     data-css="c-accordion"
     data-js-module="accordion"{{#if options.settings.accJsOptions}}
     data-js-options='{{stringify options.settings.accJsOptions}}'{{/if}} role="tablist">
		{{{yield}}}
</div>

accordion__item.hbs

{{#unless options.settings.accNoWrapper}}
	<div class="accordion__item">
{{/unless}}
	<div class="accordion__header">
		<a href="#{{options.accItemId}}"
		   class="accordion__btn"
		   data-js-item="accordion-btn" role="tab"
		   aria-controls="{{options.accItemId}}">
			<span class="accordion__btn-inner">{{options.accButton}}</span>
		</a>
	</div>
	<div class="accordion__content"
	     id="{{options.accItemId}}"
	     data-js-item="accordion-content" role="tabpanel"
	     aria-labelledby="{{options.accItemId}}">
		<div class="accordion__content-inner">
			{{{yield}}}
		</div>
	</div>
{{#unless options.settings.accNoWrapper}}
	</div>
{{/unless}}

Data File

accordion-bp.hjson

{
	"title": "Accordion",
	"variations": {
		"simple": {
			"docs": {
				"variationName": "Simple Accordion"
			},
			"settings": {
				"accContextClass": "default",
				"accClasses": false
			},
			"content": {
				"items": [
					{
						"itemId": "test-1",
						"itemBtnText": "Item 1"
					},
					{
						"itemId": "test-2",
						"itemBtnText": "Item 2"
					}
				]
			}
		},
		"singleOpen": {
			"docs": {
				"variationName": "Single Open Accordion with Default Openings"
			},
			"settings": {
				"accContextClass": "default",
				"accClasses": false,
				"accJsOptions": {
					"singleOpen": true
				}
			},
			"content": {
				"items": [
					{
						"itemId": "test-2-1",
						"itemBtnText": "Item 1"
					},
					{
						"itemId": "test-2-2",
						"itemBtnText": "Item 2"
					}
				]
			}
		}
	}
}

Styles

_accordion.scss

/* ===================================================
Accordion
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$accordion-toggle-duration: 250ms !default;
$accordion-transition-method: ease !default;
$accordion-icon-width: 15px !default;
$accordion-icon-height: 2px !default;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-accordion"] {
	position: relative;
	margin-bottom: 30px;

	/*
	Unresolved
	----------------------- */
	&.is-unresolved {
	}

	/*
	Wrapper Item
	----------------------- */
	.accordion__item {

	}

	/*
	Header/ Toggle Button
	----------------------- */
	.accordion__header {
		margin-bottom: 8px;
	}

	.accordion__btn {
		@include print() {
			border-bottom: 1px solid $color-gray-border;
			padding-left: 0px !important;
		}

		&::before,
		&::after {
			@include print() {
				display: none !important;
			}
		}
	}

	/*
	Content/ Toggle Content
	----------------------- */
	.accordion__content {

		@include print() {
			height: auto !important;
		}
	}

	/*
	Modifiers
	----------------------- */
	.is-closed {
		height: 0;
		transition: height $accordion-transition-method $accordion-toggle-duration;
		overflow: hidden;
	}

	.is-open {
		transition: height $accordion-transition-method $accordion-toggle-duration;
		overflow: hidden;
	}

	// !IMPORTANT for calculation
	.is-calculating {
		position: absolute !important;
		visibility: hidden !important;
		display: block !important;
		height: auto !important;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-accordion--default {
	/*
	Header/ Toggle Button
	----------------------- */
	.accordion__btn {
		font-family: $font-bold;
		font-weight: 700;
		color: $color-green-hc-dark;
		display: block;
		padding: 18px 50px 18px 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;
		text-decoration: none;
		background-color: $color-light;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;

		&:hover,
		&:focus {

			&::before,
			&::after {
				background-color: $color-dark;
			}

			.accordion__btn-inner {
				color: $color-dark;
			}
		}

		&::before,
		&::after {
			@extend %pseudo;

			transition: bottom $accordion-toggle-duration linear $accordion-toggle-duration, transform $accordion-toggle-duration ease-out;
			background-color: $color-green;
			height: $accordion-icon-height;
			right: 20px;
			top: 50%;
			width: $accordion-icon-width;
		}

		&::after {
			transform: rotate(-90deg);

			@include hcm() {
				transform: rotate(0deg);
				content: '+';
				font-size: 28px;
			}
		}

		&.is-active {

			&::before {
				transform: rotate(180deg);
			}

			&::after {
				transform: rotate(0deg);

				@include hcm() {
					transform: rotate(0deg);
					content: '-';
					font-size: 28px;
				}
			}
		}

		.accordion__btn-inner {
			color: $color-green-hc-dark;
		}
	}

	.accordion__btn-inner {
		color: $color-green-hc-dark;
		transition: color $animation-duration-std $animation-easing-std;

		&:hover,
		&:focus,
		&:active {
			color: $color-dark;
		}
	}

	/*
	Icon
	----------------------- */
	.accordion__icon {
		position: relative;
	}

	/*
	Content
	----------------------- */
	.accordion__content-inner {
		padding: 20px 20px 50px;
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		color: $color-dark;

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		@include print() {
			border-bottom: 1px solid $color-gray-border;
			padding-left: 0px !important;
		}

	}

	.accordion__content-inner > p:not(:empty) {
		margin-bottom: 15px;

		@include bp($bp-desktop-m) {
			margin-bottom: 20px;
		}
	}

	.accordion__content-inner > ul {
		@include content-ul-styles();
	}

	.accordion__content-inner > ol {
		@include content-ol-styles();
	}

	.accordion__content-inner > ul, .accordion__content-inner > ol {
		margin-bottom: 15px;
		margin-left: 0;
		width: calc(100%);

		@include bp($bp-desktop-m) {
			margin-bottom: 20px;
		}

		& > li:first-child {
			margin-top: 0;
		}
	}






	.accordion__content-inner > p:empty {
		margin: 0; height:0;
	}

	.accordion__content-inner > h3 {
		margin-left: 0px;
		width: 100%;
		flex: 0 0 100%;
	}

}

Scripts

accordion.js

/**
 * Represents a simple accordion with transitions and max-height.
 *
 * @module Accordion
 * @version v1.0.0
 *
 * @author Sebastian Fitzner
 * @author Andy Gutsche
 */

/**
 * Requirements
 */

import $ from 'jquery';
import Component from '@veams/component';
import forEach from '@veams/helpers/lib/array/for-each';

/**
 * Class Accordion
 */
class Accordion extends Component {
	/**
	 * General Properties
	 */
	$el = $(this.el);
	_$accordionContents = $(this.options.selectors.accordionContent, this.$el);
	_$accordionBtns = $(this.options.selectors.accordionBtn, this.$el);
	_$target = null;
	_$btn = null;

	openIndex = this.options.openIndex;

	constructor(obj) {
		let options = {
			classes: {
				active: 'is-active',
				calculating: 'is-calculating',
				close: 'is-closed',
				open: 'is-open',
				unresolved: 'is-unresolved'
			},
			clickHandler: 'click',
			dataMaxAttr: 'data-js-height',
			openAllOnInit: false,
			openByHash: false,
			openIndex: null,
			openOnViewports: ['tablet-s', 'tablet-l', 'desktop-s', 'desktop-m', 'desktop-l'],
			removeStyles: false, // TODO
			selectors: {
				accordionBtn: '[data-js-item="accordion-btn"]',
				accordionContent: '[data-js-item="accordion-content"]'
			},
			singleOpen: false,
			tabMode: false,
			windowwidth: 0
		};

		super(obj, options);
	}

	/** =================================================
	 * GETTER & SETTER
	 * ================================================ */

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0',
			vc: true,
			mod: false // set to true if source was modified in project
		};
	}

	set $accordionContents(items) {
		this._$accordionContents = items;
	}

	get $accordionContents() {
		return this._$accordionContents;
	}

	set $accordionBtns(items) {
		this._$accordionBtns = items;
	}

	get $accordionBtns() {
		return this._$accordionBtns;
	}

	set $target(item) {
		this._$target = item;
	}

	get $target() {
		return this._$target;
	}

	set $btn(item) {
		this._$btn = item;
	}

	get $btn() {
		return this._$btn;
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */
	get events() {
		return {
			'{{this.options.clickHandler}} {{this.options.selectors.accordionBtn}}': 'handleClick'
		};
	}

	get subscribe() {
		return {
			'{{context.EVENTS.resize}}': 'render',
			'{{context.EVENTS.accordion.closeAll}}': 'closeAll',
			'{{context.EVENTS.accordion.openAll}}': 'openAll'
		};
	}

	/**
	 * Bind all events
	 */
	bindEvents() {
		let fnOnHashChange = this.onHashChange.bind(this);

		// Global events
		if (this.options.openByHash) {
			$(window).on(this.context.EVENTS.hashchange, fnOnHashChange);
		}
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	didMount() {
		if (this.options.openByHash) {
			let idx = this.getIndexByHash();

			this.openIndex = typeof idx === 'number' ? idx : this.options.openIndex;
		} else if (this.options.tabMode && !this.options.openIndex) {
			this.openIndex = 0;
		}
	}

	render() {

		if (!this.context.currentMedia) {
			console.warn(
				'Accordion: @veams/plugin-media-query-handler is necessary to support breakpoints in the accordion component!'
			);
			return;
		}

		if ($(window).width() != this.options.windowwidth) {
			this.options.windowwidth = $(window).width();
			this.removeStyles();

			setTimeout ( this.saveHeights(this.$accordionContents), 300);

			this.closeAll();

			if (this.options.openAllOnInit) {
				this.openAll();
			}

			// Open on index if set in options
			if (typeof this.openIndex === 'number') {
				if (
					this.options.tabMode ||
					this.options.openOnViewports.indexOf(this.context.currentMedia) !== -1
				) {
					this.activateBtn(this.$accordionBtns.eq(this.openIndex));
					this.slideDownV(this.$accordionContents.eq(this.openIndex));
				}
			}

			if (this.$el.hasClass(this.options.classes.unresolved)) {
				this.$el.removeClass(this.options.classes.unresolved);
			}
		}

	}

	/** =================================================
	 * CUSTOM ACCORDION METHODS
	 * ================================================= */

	/**
	 * Get index of accordion content referenced by hash
	 *
	 * @return {number|boolean} - index of element or false if no match
	 */
	getIndexByHash() {
		let hash = document.location.hash.split('#');
		let retVal = false;
		let i = 0;

		if (hash < 2) {
			return false;
		}

		for (i; i < this.$accordionContents.length; i++) {
			if (this.$accordionContents[i].id === hash[1]) {
				retVal = i;
				break;
			}
		}

		return retVal;
	}

	/**
	 * Open accordion content referenced by hash
	 *
	 * @param {object} e - event object
	 */
	onHashChange(e) {
		let idx = this.getIndexByHash();

		if (typeof idx === 'number') {
			if (this.options.singleOpen) {
				this.closeAll();
			}

			this.activateBtn(this.$accordionBtns.eq(idx));
			this.slideDownV(this.$accordionContents.eq(idx));
		}
	}

	/**
	 * Save heights of all accordion contents.
	 *
	 * @param {Array} items - array of items
	 */
	saveHeights(items) {
		forEach(items, (idx, item) => {
			this.saveHeight(item);
		});
	}

	/**
	 * Save the height of the node item.
	 *
	 * @param {Object} item - item to calculate the height
	 */
	saveHeight(item) {
		let $el = $(item);

		// the el is hidden so:
		// making the el block so we can measure its height but still be hidden
		$el.addClass(this.options.classes.calculating);

		let wantedHeight = $el.outerHeight();

		// reverting to the original values
		$el.removeClass(this.options.classes.calculating);

		// save height in data attribute
		$el.attr(this.options.dataMaxAttr, wantedHeight);
	}

	/**
	 * Handle the click,
	 * get the id of the clicked button and
	 * execute the toggleContent method.
	 *
	 * @param {Object} e - event object
	 * @param {object} currentTarget - Target to which listener was attached.
	 */
	handleClick(e, currentTarget) {
		this.$btn = currentTarget ? $(currentTarget) : $(e.currentTarget);
		let targetId = this.$btn.attr('href');

		e.preventDefault();

		if (this.options.tabMode && this.$btn.hasClass(this.options.classes.active)) {
			return;
		}

		this.toggleContent(targetId);
	}

	/**
	 * Toggle the accordion content by using the id of the accordion button.
	 *
	 * @param {String} id - id of the target
	 *
	 * @public
	 */
	toggleContent(id) {
		this.$target = this.$el.find(id);

		if (this.$target.hasClass(this.options.classes.open)) {
			this.slideUpV(this.$target);
			this.deactivateBtn(this.$btn);
		} else {
			if (this.options.singleOpen || this.options.tabMode) {
				this.closeAll();
			}

			this.activateBtn(this.$btn);
			this.slideDownV(this.$target);
		}
	}

	/**
	 * Mimics the slideUp functionality of jQuery by using height and transition.
	 *
	 * @param {Object} $item - jQuery object of item
	 */
	slideUpV($item) {
		$item
			.css('height', 0)
			.removeAttr('style')
			.attr('aria-expanded', 'false')
			.removeClass(this.options.classes.open)
			.addClass(this.options.classes.close);
	}

	/**
	 * Mimics the slideDown functionality of jQuery by using height and transition.
	 *
	 * @param {Object} $item - jQuery object of item
	 */
	slideDownV($item) {
		$item
			.css('height', $item.attr('data-js-height') + 'px')
			.attr('aria-expanded', 'true')
			.removeClass(this.options.classes.close)
			.addClass(this.options.classes.open);
	}

	/**
	 * Adds active class to the clicked button.
	 *
	 * @param {Object} $item - jQuery object of button
	 */
	activateBtn($item) {
		$item.addClass(this.options.classes.active);
	}

	/**
	 * Removes active class from the button.
	 *
	 * @param {Object} $item - jQuery object of button
	 */
	deactivateBtn($item) {
		$item.removeClass(this.options.classes.active);
	}

	/**
	 * Remove all styles of the accordion content elements
	 */
	removeStyles() {
		this.$accordionContents.removeAttr('style');
	}

	/**
	 * Close all accordion contents and active buttons
	 *
	 * @public
	 */
	closeAll() {
		forEach(this.$accordionContents, (idx, item) => {
			this.slideUpV($(item));
		});
		forEach(this.$accordionBtns, (idx, item) => {
			this.deactivateBtn($(item));
		});
	}

	/**
	 * Close all accordion contents and active buttons
	 *
	 * @public
	 */
	openAll() {
		forEach(this.$accordionContents, (idx, item) => {
			this.slideDownV($(item));
		});
		forEach(this.$accordionBtns, (idx, item) => {
			this.activateBtn($(item));
		});
	}
}

// Returns constructor
export default Accordion;

HTML Output

Simple Accordion

<div class="c-accordion--default" data-css="c-accordion" data-js-module="accordion" role="tablist">
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test-1" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test-1">
				<span class="accordion__btn-inner">Item 1</span>
			</a>
		</div>
		<div class="accordion__content" id="test-1" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-1">
			<div class="accordion__content-inner">
				<p>Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:</p>
				<ul>
					<li>Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder</li>
					<li>Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder</li>
				</ul>
				<p>Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.<ul>
						<li>Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder</li>
						<li>Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.</li>
					</ul>3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.<b>Ablauf des Feststellungsverfahrens</b>Sobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.</p>
				<p>test2</p>
				<p><span class="infobox"><span class="infobox-icon"></span>test dann infobox</span></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.</p>
				<p>test hier weiterer Inhalt in einem P</p>
				<ul>
					<li>Hier dann Punkt 1</li>
					<li>Hier dann Punkt 2 mit SUB
						<ul>
							<li>Hier dann sub1</li>
							<li>Hier dann sub2</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test-2" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test-2">
				<span class="accordion__btn-inner">Item 2</span>
			</a>
		</div>
		<div class="accordion__content" id="test-2" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2">
			<div class="accordion__content-inner">
				<p>Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:</p>
				<ul>
					<li>Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder</li>
					<li>Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder</li>
				</ul>
				<p>Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.<ul>
						<li>Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder</li>
						<li>Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.</li>
					</ul>3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.<b>Ablauf des Feststellungsverfahrens</b>Sobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.</p>
				<p>test2</p>
				<p><span class="infobox"><span class="infobox-icon"></span>test dann infobox</span></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.</p>
				<p>test hier weiterer Inhalt in einem P</p>
				<ul>
					<li>Hier dann Punkt 1</li>
					<li>Hier dann Punkt 2 mit SUB
						<ul>
							<li>Hier dann sub1</li>
							<li>Hier dann sub2</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Single Open Accordion with Default Openings

<div class="c-accordion--default" data-css="c-accordion" data-js-module="accordion" data-js-options='{&quot;singleOpen&quot;:true}' role="tablist">
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test-2-1" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test-2-1">
				<span class="accordion__btn-inner">Item 1</span>
			</a>
		</div>
		<div class="accordion__content" id="test-2-1" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2-1">
			<div class="accordion__content-inner">
				<p>Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:</p>
				<ul>
					<li>Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder</li>
					<li>Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder</li>
				</ul>
				<p>Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.<ul>
						<li>Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder</li>
						<li>Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.</li>
					</ul>3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.<b>Ablauf des Feststellungsverfahrens</b>Sobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.</p>
				<p>test2</p>
				<p><span class="infobox"><span class="infobox-icon"></span>test dann infobox</span></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.</p>
				<p>test hier weiterer Inhalt in einem P</p>
				<ul>
					<li>Hier dann Punkt 1</li>
					<li>Hier dann Punkt 2 mit SUB
						<ul>
							<li>Hier dann sub1</li>
							<li>Hier dann sub2</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test-2-2" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test-2-2">
				<span class="accordion__btn-inner">Item 2</span>
			</a>
		</div>
		<div class="accordion__content" id="test-2-2" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2-2">
			<div class="accordion__content-inner">
				<p>Absolventen und Absolventinnen der Meisterprüfung, einer der Meisterprüfung gleichgestellten beruflichen Fortbildungsprüfung oder einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie, die an der Ludwig-Maximilians-Universität München ein Studium aufnehmen möchten, können die Feststellung des allgemeinen Hochschulzugangs beantragen.1. das Antragsformular vollständig ausgefüllt und eigenhändig unterschrieben sowie2. eines der folgenden Zeugnisse in amtlich oder öffentlich beglaubigter Kopie und die zusätzlich geforderten Nachweise bei der Studentenkanzlei einreichen:</p>
				<ul>
					<li>Zeugnis über die bestandene, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte Meisterprüfung mit ausgewiesener Durchschnittsnote oder</li>
					<li>Zeugnis über die bestandene, vom Staatsministerium für Unterricht und Kultus der Meisterprüfung gleichgestellte, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegte berufliche Fortbildungsprüfung, deren vorbereitende Lehrgänge einen Stundenumfang von insgesamt mindestens 400 Stunden (Nachweis über diese Stundenzahl) umfassen mit ausgewiesener Durchschnittsnote oder</li>
				</ul>
				<p>Bei Berufsabschlüssen, die im Ausland erworben wurden, empfiehlt es sich, zum Nachweis des allgemeinen Zugangs die im Freistaat Bayern örtlich zuständige Stelle nach § 71 des Berufsbildungsgesetzes zu beteiligen. Bitte kontaktieren Sie dazu die für Ihren Berufsabschluss zuständige Kammer (z.B. Industrie- und Handelskammer in Bayern) und lassen sich eine entsprechende Gleichwertigkeitsbescheinigung über einen in Bayern gleichgestellten Berufsabschluss ausstellen.<ul>
						<li>Zeugnis (und Urkunde) über die bestandene Abschlussprüfung einer öffentlichen oder staatlich anerkannten Fachschule oder Fachakademie oder</li>
						<li>Nachweis eines einer bestandenen, nach den Bestimmungen des Berufsbildungsgesetzes oder der Handwerksordnung abgelegten Meisterprüfung gleichwertigen Abschlusses nach einer landesrechtlichen Fortbildungsregelung für Berufe im Gesundheitswesen sowie im Bereich der sozialpflegerischen und sozialpädagogischen Berufe mit ausgewiesener Durchschnittsnote.</li>
					</ul>3. ein Beratungsgespräch bei der Zentralen Studienberatung der Ludwig-Maximilians-Universität München absolvieren. Einen Termin für das Beratungsgespräch vereinbaren Sie bitte direkt bei der Zentralen Studienberatung.<b>Ablauf des Feststellungsverfahrens</b>Sobald Ihre eingereichten Unterlagen überprüft worden sind und Sie bei der Zentralen Studienberatung das Beratungsgespräch absolviert haben, erhalten Sie von der Studentenkanzlei eine amtliche Bescheinigung über das Vorliegen des allgemeinen Hochschulzugangs.Diese Bescheinigung enthält das Datum des Erwerbs des Hochschulzugangs (Datum der Absolvierung des Beratungsgesprächs) und die für die Bewerbung in zulassungsbeschränkte Studiengänge oder Studiengänge mit Eignungsfeststellungsverfahren notwendige Durchschnittsnote.Diese Bescheinigung dient Ihnen als Nachweis des Hochschulzugangs im Zulassungs- und Immatrikulationsverfahren.Bitte beachten Sie, dass sich während der Bewerbungs- und Immatrikulationsphasen die Bearbeitungszeit (bis zu ca. sechs Wochen) verlängern kann.</p>
				<p>test2</p>
				<p><span class="infobox"><span class="infobox-icon"></span>test dann infobox</span></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid assumenda, ducimus facilis inventore iste labore laborum libero nam necessitatibus neque nulla numquam perspiciatis rem, repudiandae sed soluta veniam vero.</p>
				<p>test hier weiterer Inhalt in einem P</p>
				<ul>
					<li>Hier dann Punkt 1</li>
					<li>Hier dann Punkt 2 mit SUB
						<ul>
							<li>Hier dann sub1</li>
							<li>Hier dann sub2</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link