Accordion links, afbeeldingen rechts

V000-16

Maakt het mogelijk dat voor ieder item in de accordion een afbeelding geplaatst wordt die ernaast getoont wordt. Als een ander item in de accordion ge-opend wordt dan wordt die afbeelding getoont en de ander verborgen.

Hoe te gebruiken?

Neem onderstaande HTML en JavaScript code over in de website. Vergeet niet de sectie een unieke naam te geven doormiddel van de "FIXME:" tekst aan te passen naar een echte naam.

Mocht je willen dat de afbeelding wel geklemt wordt in een container, verander dan de `clamp-left-unclamp-right` class naar de `clamp-left-stretch-right`.

Voorvertoning

HTML
Kopiëren<nc-teleport from="[data-partial=image]" to="[data-teleport=target]">
	<div id="FIXME:-accordion-wrapper" data-open-first="true">
		<div class="clamp-left-unclamp-right">
			<nc-preset-list name="FIXME:-accordion" attributes="class=accordion,id=FIXME:-accordion">
				<template nc-preset-key="accordion-text" nc-preset-title="Item">
					<nc-image name="{%name%}-image" width="640" height="640" attributes="class=h-100"></nc-image>

					<div class="card p-0">
						<div class="card-header" id="{%name%}-item-{%index%}-heading">
							<h3 class="mb-0">
								<button class="btn btn-link btn-block text-left p-0" type="button" data-toggle="collapse" data-target="#{%name%}-item-{%index%}-body" aria-expanded="true" aria-controls="{%name%}-item-{%index%}-body">
									<nc-element name="{%name%}-title" type="span"></nc-element>
								</button>
							</h3>
						</div>

						<div id="{%name%}-item-{%index%}-body" class="collapse" aria-labelledby="{%name%}-item-{%index%}-heading" data-parent="#FIXME:-accordion">
							<div class="card-body">
								<nc-text name="{%name%}-text"></nc-text>
							</div>
						</div>
					</div>
				</template>
			</nc-preset-list>

			<div data-teleport="target"></div>
		</div>
	</div>
</nc-teleport>

CSS
Kopiëren/* Hide the images in the accordion when in layout modus. */
[data-editor-mode="layout"] #FIXME:-accordion-wrapper [data-partial="preset-list"] [data-partial="image"] {
	display: none;
}

JS
Kopiëren(function() {
	const setup = () => {
		const wrapper = document.querySelector('[id="FIXME:-accordion-wrapper"]');
		if (!wrapper) {
			return;
		}
		let openFirst = wrapper.getAttribute('data-open-first');
		openFirst = openFirst && openFirst !== 'false';

		const accordionImages = Array.from(
			wrapper.querySelectorAll('[data-partial="image"]')
		);
		const accordionItems = Array.from(
			wrapper.querySelectorAll('.collapse')
		);
		const setupItem = (index, item, image) => {
			const $item = $(item);
			if (index !== 0) {
				image.setAttribute('hidden', true);
			} else if (openFirst) {
				$item.collapse('show');
			}
			$item.on('shown.bs.collapse', function() {
				image.removeAttribute('hidden');
				for (let i = 0; i < accordionImages.length; i++) {
					if (accordionImages[i] !== image) {
						accordionImages[i].setAttribute('hidden', true);
					}
				}
			});
		}
		for (let i = 0; i < accordionItems.length; i++) {
			setupItem(i, accordionItems[i], accordionImages[i]);
		}
	}

	onInteractive(setup);
	onComplete(function() {
		if (window.editor) {
			window.editor.addEventListener('reloaded', setup);
		}
	});
}());