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>
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam fugiat eligendi ex minima, quo eius dicta, cumque adipisci odio et hic in reiciendis sapiente nisi ipsam rerum maxime corporis dolore!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque cupiditate aspernatur ut magnam quod voluptate recusandae laboriosam esse natus nobis obcaecati porro praesentium accusamus odio, assumenda voluptas optio vitae sapiente!
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.
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.
Dolor sit, amet consectetur adipisicing elit.
Porro magnam dolorem maxime odio nulla autem, sed veritatis sit possimus?
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.