docs/index.html

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Accordion</title>
	<link rel="icon" type="image/png" href="accordion.png">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
	<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">
	<style>
		.Alert {
			margin: 1em;
			position: fixed;
			top: 0;
			right: 0;
			z-index: 10;
		}
	</style>
</head>

<body>
	<div class="Alert js-alert"></div>
	<div class="container">
		<div class="row my-5">
			<div class="col-12">
				<h1 class="m-0">
					<a href="https://github.com/19h47/19h47-accordion">Accordion</a>
				</h1>
				<p>Build vertically collapsing accordions</p>
			</div>
		</div>
		<div class="row my-5">
			<div class="col-12">
				<pre class="p-3 mt-0 mb-3 language-javascript"><code>import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);

accordion.init();</code></pre>

				<pre class="p3 mb-0 mt-3 language-html"><code>&lt;div class=&quot;js-accordion&quot;&gt;
	&lt;div class=&quot;js-accordion-panel&quot; data-accordion-open=&quot;true&quot; data-accordion-deselect=&quot;true&quot;&gt;
		&lt;button
			class=&quot;js-accordion-header&quot;
			type=&quot;button&quot;
			aria-expanded=&quot;true&quot;
			aria-controls=&quot;lorem&quot;
		&gt;
			Toggle
		&lt;/button&gt;

		&lt;div id=&quot;lorem&quot; class=&quot;js-accordion-body&quot; role=&quot;region&quot;&gt;
			&lt;div class=&quot;js-accordion-inner&quot;&gt;
				Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas
				quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at
				magnam tenetur maxime ad optio veniam!&lt;br /&gt;
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias
				excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum
				ullam at quod soluta qui tempore sit eveniet dicta esse.
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
			</div>
		</div>
		<div class="row my-5">
			<div class="col-12">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#deselectable">Deselectable</a></h2>

					<div class="js-accordion">
						<div class="border p-3 my-3">
							<button class="btn btn-primary js-destroy" type="button">
								Destroy
							</button>
							<button class="btn btn-primary js-create" type="button">
								Create
							</button>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="true" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="true" aria-controls="lorem-01" id="lorem-01-header">
									Toggle
								</button>
							</div>

							<div id="lorem-01">
								<div class="card-body js-accordion-inner">
									<div class="form-group">
										<label for="number"> Number </label>
										<input id="number" class="form-control" type="number">
									</div>
									<p>
										Sit amet, consectetur adipisicing elit. Omnis ex
										inventore tempore. Quam voluptas quibusdam excepturi
										accusantium voluptatum facere. Nemo vero iste
										recusandae, at magnam tenetur maxime ad optio veniam!<br>
										Lorem ipsum dolor sit amet, consectetur adipisicing
										elit. Doloremque, molestias excepturi molestiae nesciunt
										alias. Nobis aut praesentium, commodi minus laborum
										ullam at quod soluta qui tempore sit eveniet dicta esse.
									</p>
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="true" aria-controls="consectetur-01">
									Toggle
								</button>
							</div>

							<div id="consectetur-01">
								<div class="card-body js-accordion-inner">
									Itaque dolore ipsa harum nobis distinctio aperiam quis omnis
									error incidunt iusto dolorem inventore laboriosam quaerat
									numquam tenetur dicta quibusdam quisquam, debitis!
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header has-decor" type="button" aria-expanded="false" aria-controls="nihil-01" id="nihil-01-header">
									Toggle
								</button>
							</div>

							<div id="nihil-01">
								<div class="card-body js-accordion-inner">
									Nemo nobis doloribus praesentium eum animi qui eos. Sit
									accusantium rem consequatur quisquam ullam veritatis tenetur
									architecto.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row my-5">
			<div class="col-12">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#undeselectable">Undeselectable</a></h2>

					<div class="js-accordion">
						<div class="border p-3 my-3">
							<button class="btn btn-primary js-destroy" type="button">
								Destroy
							</button>
							<button class="btn btn-primary js-create" type="button">
								Create
							</button>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="true" data-accordion-deselect="false">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="true" aria-controls="lorem-02" id="lorem-02-header">
									Toggle
								</button>
							</div>

							<div id="lorem-02">
								<div class="card-body js-accordion-inner">
									Sit amet, consectetur adipisicing elit. Omnis ex inventore
									tempore. Quam voluptas quibusdam excepturi accusantium
									voluptatum facere. Nemo vero iste recusandae, at magnam
									tenetur maxime ad optio veniam!<br>
									Lorem ipsum dolor sit amet, consectetur adipisicing elit.
									Doloremque, molestias excepturi molestiae nesciunt alias.
									Nobis aut praesentium, commodi minus laborum ullam at quod
									soluta qui tempore sit eveniet dicta esse.
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="false">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="consectetur-02">
									Toggle
								</button>
							</div>

							<div id="consectetur-02">
								<div class="card-body js-accordion-inner">
									Itaque dolore ipsa harum nobis distinctio aperiam quis omnis
									error incidunt iusto dolorem inventore laboriosam quaerat
									numquam tenetur dicta quibusdam quisquam, debitis!
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="false">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header has-decor" type="button" aria-expanded="false" aria-controls="nihil-02" id="nihil-02-header">
									Toggle
								</button>
							</div>

							<div id="nihil-02">
								<div class="card-body js-accordion-inner">
									Nemo nobis doloribus praesentium eum animi qui eos. Sit
									accusantium rem consequatur quisquam ullam veritatis tenetur
									architecto.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row my-5">
			<div class="col-12">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#hash">Hash</a></h2>

					<div class="js-accordion">
						<div id="behir" class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<a href="#behir-body" class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="behir-body">
									Behir
								</a>
							</div>

							<div id="behir-body">
								<div class="card-body js-accordion-inner">
									The behir is a snake-like reptilian monster whose dozen legs
									allow it to move with considerable speed and climb at fully
									half its normal movement rate. It can fold its limbs close
									to its long, narrow body and slither in snake-fashion if it
									desires. The head looks more crocodilian than snake-like,
									but has no difficulty in opening its mouth wide enough to
									swallow prey whole, the way a snake does.<br>
									Behir have band-like scales of great hardness. Their color
									ranges from ultramarine to deep blue with bands of
									gray-brown. The belly is pale blue. The two large horns
									curving back over the head look dangerous enough but are
									actually used for preening the creature's scales and not for
									fighting.
								</div>
							</div>
						</div>

						<div id="stirge" class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<a href="#stirge-body" class="btn btn-primary js-accordion-header" aria-expanded="true" aria-controls="stirge-body">
									Stirge
								</a>
							</div>

							<div id="stirge-body">
								<div class="card-body js-accordion-inner">
									Stirges are bird-like creatures that drink the blood of
									their victims for sustenance. They have four small,
									pincer-like legs that they use to clamp onto the necks of
									their victims. They are rusty-red to reddish brown in color,
									and their eyes and feet are yellowish. The dangling
									proboscises of stirges are pink at the tip, fading to gray
									at the base (near their heads).
								</div>
							</div>
						</div>

						<div id="androsphinx" class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<a href="#androsphinx-body" class="btn btn-primary js-accordion-header has-decor" aria-expanded="false" aria-controls="androsphinx-body">
									Androsphinx
								</a>
							</div>

							<div id="androsphinx-body">
								<div class="card-body js-accordion-inner">
									Androsphinxes are huge, winged mythological creatures with
									the bodies of male lions and man-like facial features. They
									can speak the languages of common and all sphinxes.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-12 my-5">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#multiselectable">Multiselectable</a></h2>

					<div class="js-accordion" data-accordion-multiselectable="true">
						<!-- Panel -->
						<div id="chimera" class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="chimera-body">
									Chimera
								</button>
							</div>

							<div id="chimera-body">
								<div class="card-body js-accordion-inner">
									<p>
										How chimerae were created is a dark mystery better left
										unexplored. The chimera has the hindquarters of a large,
										black goat and the forequarters of a huge, tawny lion.
										Its body has brownish-black wings like those of a
										dragon.
									</p>
									<p>
										The monster has three heads, those of a goat, a lion,
										and a fierce dragon. The goat head is pitch black, with
										glowing amber eyes and long ochre horns. The lion head
										is framed by a brown mane and has green eyes. The dragon
										head is covered with orange scales and has black eyes.
									</p>
									<p class="mb-0">
										The chimera speaks a limited form of the foul language
										of red dragons. As a rule, however, it will only pause
										to communicate with those creatures who are more
										powerful than itself.
									</p>
								</div>
							</div>
						</div>

						<div id="fish" class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button type="button" class="btn btn-primary js-accordion-header" aria-expanded="true" aria-controls="fish-body">
									Fish
								</button>
							</div>

							<div id="fish-body">
								<div class="card-body js-accordion-inner">
									Giant fish are a diverse group of creatures with varying
									attack and defense capabilities. Many of these creatures are
									able to swallow victims whole. Swallowed victims take normal
									bite damage. Victims take 1 point of damage per round from
									the fish's digestive juices and have a 5% cumulative chance
									per round of suffocating. To escape the fish's stomach, a
									victim can cut free with a sharp-edged weapon. The victim
									may be rescued by cutting or tearing from the outside. When
									the fish has lost 50% of its hit points, the victim breaks
									free.
								</div>
							</div>
						</div>

						<div id="lizard-man" class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button type="button" class="btn btn-primary js-accordion-header has-decor" aria-expanded="false" aria-controls="lizard-man-body">
									Lizard Man
								</button>
							</div>

							<div id="lizard-man-body">
								<div class="card-body js-accordion-inner">
									Lizard men are savage, semi-aquatic, reptilian humanoids
									that live through scavenging, raiding, and, in less hostile
									areas, by fishing and gathering.<br>
									Adult lizard men stand 6 to 7 feet tall, weighing 200 to 250
									pounds. Skin tones range from dark green to gray to brown,
									and their scales give them a flecked appearance. Their tails
									average 3 to 4 feet long and are not prehensile. Males are
									nearly impossible to distinguish from females without close
									inspection. Lizard man garb is limited to strings of bones
									and other barbaric ornament. Lizard men speak their own
									language.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-12 my-5">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#nested">Nested</a></h2>

					<div class="js-accordion">
						<div class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="lorem-03" id="lorem-03-header">
									Lorem ipsum
								</button>
							</div>

							<div id="lorem-03">
								<div class="card-body js-accordion-inner">
									<p>Dolor sit, amet consectetur adipisicing elit.</p>

									<div class="js-accordion">
										<div class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
											<div class="card-header">
												<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="porro-01" id="porro-01-header">
													Porro
												</button>
											</div>

											<div id="porro-01">
												<div class="card-body js-accordion-inner">
													<p>Porro magnam dolorem maxime odio nulla
														autem, sed veritatis sit possimus?</p>

													<div class="js-accordion">
														<div class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
															<div class="card-header">
																<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="false" aria-controls="architecto" id="architecto-header">
																	Architecto
																</button>
															</div>

															<div id="architecto">
																<div class="card-body js-accordion-inner">
																	Lorem ipsum, dolor sit amet consectetur adipisicing
																	elit. Provident exercitationem repudiandae illum
																	officiis sint laudantium, maiores est mollitia,
																	atque minus nisi facilis soluta obcaecati ratione
																	deserunt architecto asperiores quo cumque.
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div id="elit" class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button type="button" class="btn btn-primary js-accordion-header" aria-expanded="true" aria-controls="elit-body">
									Elit
								</button>
							</div>

							<div id="elit-body">
								<div class="card-body js-accordion-inner">
									Nihil iure suscipit reprehenderit nisi eaque at veniam
									dolorem officiis omnis quam perferendis.
								</div>
							</div>
						</div>

						<div id="quam" class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button type="button" class="btn btn-primary js-accordion-header has-decor" aria-expanded="false" aria-controls="quam-body">
									Quam
								</button>
							</div>

							<div id="quam-body">
								<div class="card-body js-accordion-inner">
									Ipsam quisquam distinctio, esse fugiat facere. Consectetur,
									eius laboriosam.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row my-5">
			<div class="col-12">
				<div class="border p-3">
					<h2 class="mb-3"><a href="#Add">Add</a></h2>

					<div class="js-accordion">
						<div class="border p-3 my-3">
							<div class="mb-2 form-group">
								<input class="form-control js-input" type="text" placeholder="Header">
							</div>
							<div class="mb-2 form-group">
								<textarea placeholder="Body" class="form-control js-textarea"></textarea>
							</div>
							<button class="btn btn-primary js-destroy" type="button">
								Destroy
							</button>
							<button class="btn btn-primary js-create" type="button">
								Create
							</button>
							<button class="btn btn-primary js-add" type="button">Add</button>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="true" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="true" aria-controls="lorem-04" id="lorem-04-header">
									Toggle
								</button>
							</div>

							<div id="lorem-04">
								<div class="card-body js-accordion-inner">
									<p class="mb-0">
										Sit amet, consectetur adipisicing elit. Omnis ex
										inventore tempore. Quam voluptas quibusdam excepturi
										accusantium voluptatum facere. Nemo vero iste
										recusandae, at magnam tenetur maxime ad optio veniam!<br>
										Lorem ipsum dolor sit amet, consectetur adipisicing
										elit. Doloremque, molestias excepturi molestiae nesciunt
										alias. Nobis aut praesentium, commodi minus laborum
										ullam at quod soluta qui tempore sit eveniet dicta esse.
									</p>
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel my-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header" type="button" aria-expanded="true" aria-controls="consectetur-03">
									Toggle
								</button>
							</div>

							<div id="consectetur-03">
								<div class="card-body js-accordion-inner">
									Itaque dolore ipsa harum nobis distinctio aperiam quis omnis
									error incidunt iusto dolorem inventore laboriosam quaerat
									numquam tenetur dicta quibusdam quisquam, debitis!
								</div>
							</div>
						</div>

						<div class="card js-accordion-panel mt-3" data-accordion-open="false" data-accordion-deselect="true">
							<div class="card-header">
								<button class="btn btn-primary js-accordion-header has-decor" type="button" aria-expanded="false" aria-controls="nihil-03" id="nihil-03-header">
									Toggle
								</button>
							</div>

							<div id="nihil-03">
								<div class="card-body js-accordion-inner">
									Nemo nobis doloribus praesentium eum animi qui eos. Sit
									accusantium rem consequatur quisquam ullam veritatis tenetur
									architecto.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script>
	<script src="main.js"></script>
	<script>
		const elements = document.querySelectorAll('.js-accordion');
		const alert = content => {
			const div = document.createElement('div');

			div.className = 'toast fade show';
			div.style = 'toast fade show';
			div.innerHTML = `<div class="toast-body">${content}</div>`;

			div.setAttribute('role', 'alert');
			div.setAttribute('aria-live', 'assertive');
			div.setAttribute('aria-atomic', 'true');

			return div;
		};
		const $alert = document.querySelector('.js-alert');

		const onChange = content => {
			const $el = alert(content);

			$alert.appendChild($el);

			$el.addEventListener(
				'click',
				() => $el.style.setProperty('display', 'none'),
				false,
			);

			setTimeout(() => $el.parentNode.removeChild($el), 2000);
		};

		for (var i = 0; i < elements.length; i += 1) {
			const $el = elements[i];
			const multiselectable = JSON.parse(
				$el.getAttribute('data-accordion-multiselectable') || false,
			);
			const accordion = new Accordion.default($el, { multiselectable });
			const $destroy = $el.querySelector('.js-destroy') || false;
			const $create = $el.querySelector('.js-create') || false;

			const $add = $el.querySelector('.js-add');
			const $input = $el.querySelector('.js-input');
			const $textarea = $el.querySelector('.js-textarea');

			accordion.init();

			accordion.panels.forEach(panel => {
				panel.el.addEventListener('Panel.close', ({ type, detail }) => {
					console.log({ type, detail });

					const $button = detail.current.querySelector('button,a');
					const controls = $button.getAttribute('aria-controls');

					onChange(`<strong>${type}</strong> ${controls}`);
				});
			});

			accordion.panels.forEach(panel => {
				panel.el.addEventListener('Panel.open', ({ type, detail }) => {
					console.log({ type, detail });

					const $button = detail.current.querySelector('button,a');
					const controls = $button.getAttribute('aria-controls');

					onChange(`<strong>${type}</strong> ${controls}`);
				});
			});

			$destroy &&
				$destroy.addEventListener('click', () => {
					accordion.destroyAll();
				});

			$create &&
				$create.addEventListener('click', () => {
					accordion.destroyAll();
					accordion.init();
				});
			$add &&
				$add.addEventListener('click', () => {
					const { value: header } = $input;
					const { value: body } = $textarea;

					if (header && body) {
						console.log(header, body);

						accordion.destroyAll();

						accordion.el.insertAdjacentHTML(
							'beforeend',
							`<div
									class="card js-accordion-panel mt-3"
									data-accordion-open="false"
									data-accordion-deselect="true"
								>
									<div class="card-header">
										<button
											class="btn btn-primary js-accordion-header has-decor"
											type="button"
											aria-expanded="false"
											aria-controls="${header}"
										>
											${header}
										</button>
									</div>

									<div id="${header}">
										<div class="card-body js-accordion-inner">
											${body}
										</div>
									</div>
								</div>`,
						);

						accordion.init();

						accordion.panels.forEach(panel => {
							panel.el.addEventListener('Panel.open', ({ type, detail }) => {
								console.log({ type, detail });

								const $button = detail.current.querySelector('button,a');
								const controls = $button.getAttribute('aria-controls');

								onChange(`<strong>${type}</strong> ${controls}`);
							});
						});
					}
				});
		}
	</script>
</body>

</html>