Accordion

Build vertically collapsing accordions

import Accordion from '@19h47/accordion';

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

accordion.init();
<div class="js-accordion">
	<div class="js-accordion-panel" data-accordion-open="true" data-accordion-deselect="true">
		<button
			class="js-accordion-header"
			type="button"
			aria-expanded="true"
			aria-controls="lorem"
		>
			Toggle
		</button>

		<div id="lorem" class="js-accordion-body" role="region">
			<div class="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>

Deselectable

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!
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.

Itaque dolore ipsa harum nobis distinctio aperiam quis omnis error incidunt iusto dolorem inventore laboriosam quaerat numquam tenetur dicta quibusdam quisquam, debitis!
Nemo nobis doloribus praesentium eum animi qui eos. Sit accusantium rem consequatur quisquam ullam veritatis tenetur architecto.

Undeselectable

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!
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.
Itaque dolore ipsa harum nobis distinctio aperiam quis omnis error incidunt iusto dolorem inventore laboriosam quaerat numquam tenetur dicta quibusdam quisquam, debitis!
Nemo nobis doloribus praesentium eum animi qui eos. Sit accusantium rem consequatur quisquam ullam veritatis tenetur architecto.

Hash

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.
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.
Stirge
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).
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.

Multiselectable

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.

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.

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.

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.
Lizard men are savage, semi-aquatic, reptilian humanoids that live through scavenging, raiding, and, in less hostile areas, by fishing and gathering.
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.

Nested

Dolor sit, amet consectetur adipisicing elit.

Porro magnam dolorem maxime odio nulla autem, sed veritatis sit possimus?

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.
Nihil iure suscipit reprehenderit nisi eaque at veniam dolorem officiis omnis quam perferendis.
Ipsam quisquam distinctio, esse fugiat facere. Consectetur, eius laboriosam.

Add

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!
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.

Itaque dolore ipsa harum nobis distinctio aperiam quis omnis error incidunt iusto dolorem inventore laboriosam quaerat numquam tenetur dicta quibusdam quisquam, debitis!
Nemo nobis doloribus praesentium eum animi qui eos. Sit accusantium rem consequatur quisquam ullam veritatis tenetur architecto.