{{! WrapWith START: Accordion }}
{{#wrapWith "accordion" settings=this.settings content=this.content}}
{{! WrapWith START: Item }}
	{{#each content.items}}
		{{#wrapWith "accordion__item" accItemClass=this.itemClass accItemId=this.itemId accButton=itemBtnText accShowImg=itemShowImg accShowImgInfo=itemShowImgInfo}}
			<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#" >Detailseiten</a>)</p>
		{{/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">
	 {{#if options.content.headline}}
			<h2 class="accordion__headline">{{options.content.headline}}</h2>
	{{/if}}
		{{{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 {{options.accItemClass}}"
	     id="{{options.accItemId}}"
	     data-js-item="accordion-content" role="tabpanel"
	     aria-labelledby="{{options.accItemId}}" style="color:#cc0000;">
		<div class="accordion__content-inner">
			{{{yield}}}
		</div>
		{{#if options.accShowImg}}
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw"/>
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))"/>
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
					{{#if options.accShowImgInfo}}
					<figcaption class="figure__caption">
						<div class="figure__caption-inner">
								<div class="figure__caption-headline">Bild Einbindung</div>
								<p class="figure__caption-content">Um Bildinformationen noch einzublenden muss im JSON File im jeweiligen Item-Objekt noch das Attribute "itemShowImg": true und
						"itemShowImgInfo": true (Anzeige von Bildunterschriften) eingebaut sein. Für das Accordion-Modul gibt es im Modul Figure und Picture eine eigene Klasse.</p>
						</div>
					</figcaption>
					{{/if}}
				</figure>
			</div>
		{{/if}}
	</div>
{{#unless options.settings.accNoWrapper}}
	</div>
{{/unless}}

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

	.accordion__headline {
		@include headline-h2-styles();
		width: 100%;
		margin-left: 0px;
	}

	/*
	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 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		&.is-withimg {
			@include bp($bp-tablet-p) {
				flex-direction: row;
			}

			@include print() {
				flex-direction: row;
			}

			.accordion__content-inner {
				width: 100%;
				padding: 20px 20px 20px;

				@include bp($bp-tablet-p) {
					width: 70%;
					padding: 20px 20px 50px;
				}
				@include print() {
					width: 70%;
				}
			}

			.accordion__img {
				padding: 0px 20px 50px;
				width: 100%;
				box-sizing: border-box;





				@include bp($bp-tablet-p) {
					padding: 20px 20px 50px;
					width: 30%;
				}

				@include print() {
					padding: 20px 20px 50px;
					width: 30%;
				}
			}
		}

		@include print() {
			height: auto !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%;
	}

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

	/*
	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;

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

	/*
	Content
	----------------------- */
	.accordion__content-inner {
		padding: 20px 20px 50px;
		color: $color-dark;

		@include print() {
			padding-left: 0px !important;
		}

	}

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

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



	/*
	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 {
		width: 100% !important;
		position: absolute !important;
		visibility: hidden !important;
		display: flex !important; //before block
		height: auto !important;
	}
}

/* ---------------------------------------------------
Context: Default (Bereich für RTE (Detailsete))
--------------------------------------------------- */
.c-accordion--default {

	/*
	Header/ Toggle Button
	----------------------- */
	.accordion__btn {
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
	}

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

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

	}

}

/* ---------------------------------------------------
Context: lpage
--------------------------------------------------- */
.c-accordion--lpage {
	clear: both;
	display: inline-block;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.accordion__headline {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
	/*
	Header/ Toggle Button
	----------------------- */
	.accordion__btn {
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
	}

	/*
	Content
	----------------------- */
	.accordion__content-inner {
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		width: 100%;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (24/16);
			width: 70%;
		}

		sub {
			vertical-align: sub;
			font-size: smaller;
		}

		sup {
			vertical-align: super;
			font-size: smaller;
		}

		strong, b {
			@include content-b-styles();
		}

		i {
			@include content-i-styles();
		}

		/*
			Links
		----------------------------- */
		a {
			@include content-a-styles();
		}

	}
}

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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
		</div>
	</div>
</div>

Simple Accordion with image im Preview Mode (No Height setting) - For WYSIWYG-CMS-Mode

<div class="c-accordion--default" data-css="c-accordion" data-js-module="accordion" role="tablist">
	<h2 class="accordion__headline">Headline for sample detail page with images</h2>
	<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 is-withimg is-preview" id="test-1" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-1" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
					<figcaption class="figure__caption">
						<div class="figure__caption-inner">
							<div class="figure__caption-headline">Bild Einbindung</div>
							<p class="figure__caption-content">Um Bildinformationen noch einzublenden muss im JSON File im jeweiligen Item-Objekt noch das Attribute "itemShowImg": true und
								"itemShowImgInfo": true (Anzeige von Bildunterschriften) eingebaut sein. Für das Accordion-Modul gibt es im Modul Figure und Picture eine eigene Klasse.</p>
						</div>
					</figcaption>
				</figure>
			</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 is-withimg is-preview" id="test-2" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
	</div>
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test-3" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test-3">
				<span class="accordion__btn-inner">Item 3</span>
			</a>
		</div>
		<div class="accordion__content " id="test-3" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-3" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
		</div>
	</div>
</div>

Simple Accordion with image

<div class="c-accordion--default is-noheight" data-css="c-accordion" data-js-module="accordion" role="tablist">
	<h2 class="accordion__headline">Headline for sample detail page with images</h2>
	<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 is-withimg" id="test-1" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-1" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
					<figcaption class="figure__caption">
						<div class="figure__caption-inner">
							<div class="figure__caption-headline">Bild Einbindung</div>
							<p class="figure__caption-content">Um Bildinformationen noch einzublenden muss im JSON File im jeweiligen Item-Objekt noch das Attribute "itemShowImg": true und
								"itemShowImgInfo": true (Anzeige von Bildunterschriften) eingebaut sein. Für das Accordion-Modul gibt es im Modul Figure und Picture eine eigene Klasse.</p>
						</div>
					</figcaption>
				</figure>
			</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 is-withimg" id="test-2" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
				</figure>
			</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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
		</div>
	</div>
</div>

Simple Accordion with image in Landingpage

<div class="c-accordion--lpage" data-css="c-accordion" data-js-module="accordion" role="tablist">
	<h2 class="accordion__headline">Headline for sample landing page with image</h2>
	<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 is-withimg" id="test-1" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-1" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
				</figure>
			</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 is-withimg" id="test-2" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test-2" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
			<div class="accordion__img">
				<figure class="c-figure--accordion" data-css="c-figure" id="figure-content">
					<div class="figure__wrapper">
						<picture class="c-picture--accordion" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="https://placehold.co/300x300 300w, https://placehold.co/600x600 600w, https://placehold.co/1200x1200 1200w" media="(min-width: 768px)" sizes="30vw" />
							<source srcset="https://placehold.co/600x300 600w, https://placehold.co/1200x600 1200w, https://placehold.co/2400x1200 2400w" media="(max-width: 767px)" sizes="calc(100vw - ((100vw / 14) * 2))" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="picture__image" src="https://placehold.co/600x300" alt="2_zu_1_Format_s" title="2_zu_1_Format_s" data-sizes="auto" data-js-item="figure-acc-image" />
						</picture>
					</div>
					<figcaption class="figure__caption">
						<div class="figure__caption-inner">
							<div class="figure__caption-headline">Bild Einbindung</div>
							<p class="figure__caption-content">Um Bildinformationen noch einzublenden muss im JSON File im jeweiligen Item-Objekt noch das Attribute "itemShowImg": true und
								"itemShowImgInfo": true (Anzeige von Bildunterschriften) eingebaut sein. Für das Accordion-Modul gibt es im Modul Figure und Picture eine eigene Klasse.</p>
						</div>
					</figcaption>
				</figure>
			</div>
		</div>
	</div>
	<div class="accordion__item">
		<div class="accordion__header">
			<a href="#test3" class="accordion__btn" data-js-item="accordion-btn" role="tab" aria-controls="test3">
				<span class="accordion__btn-inner">Item 3</span>
			</a>
		</div>
		<div class="accordion__content " id="test3" data-js-item="accordion-content" role="tabpanel" aria-labelledby="test3" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
		</div>
	</div>
</div>

Simple Accordion in Landingpage

<div class="c-accordion--lpage" data-css="c-accordion" data-js-module="accordion" role="tablist">
	<h2 class="accordion__headline">Headline for sample landing page</h2>
	<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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</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" style="color:#cc0000;">
			<div class="accordion__content-inner">
				<p>Um Bilder im <strong>VEAMS-Accordionmodul</strong> zu integrieren muss man im <b>JSON-File (accordion-bp.json)</b> verschiedene Einstellungen durchführen. Jedes Accordion-Item muss, wenn es ein Bild integriert haben soll das Attribute <i>"itemShowImg": true</i> setzen. Außerdem muss man dem Item das Attributei "itemClass":"is-withimg" zuweisen. Für die Bearbeitung dieses Bild-Akkordions benötigt man in der WYSIWYG-Ansicht im FS-CC noch die Klasse 'is-preview'. Sowohl die Klasse 'is-withimg' als auch 'is-preview' werden dem Element mit der Klasse 'accordion__content' zugewiesen. Soll das Bild zusätzlich noch einen beschreibenden Text haben erreicht man das durch das hinzufügen des Attribute <i>"itemShowImgInfo": true</i> pro Item.<br>Je nach ausspielender Seite muss dem Modul noch eine entsprechende Klasse zugewiesen werden (c-accordion--lpage für <a href="#" class="is-external">Landingpageseiten</a> und c-accordion--default für <a href="#">Detailseiten</a>)</p>
			</div>
		</div>
	</div>
</div>