nmd-collapse

Web component for hiding and revealing content

Usage no npm install needed!

<script type="module">
  import nmdCollapse from 'https://cdn.skypack.dev/nmd-collapse';
</script>

README

nmd-collapse npm

Hide and reveal your content easily and with style with this simple web component.

<nmd-collapse>
    mole 1<br>
    with default animation and duration (0.5s)
</nmd-collapse>
<button type="button" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 1</button>

<nmd-collapse animation="simple" duration="1.5s">
    mole 2<br>
    with custom duration and same animation as before just set explicitly
</nmd-collapse>
<button type="button" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 2</button>

<nmd-collapse animation="squish">
    mole 3<br>
    poor mole...
</nmd-collapse>
<button type="button" onclick="this.previousElementSibling.toggle()">Whack-A-Mole 3</button>

<nmd-collapse animation="flip" hidden>
    mole 4 begins hidden<br>
    yeet him away<br>
    <button type="button" onclick="this.parentElement.collapse()">Whack-A-Mole 4</button>
    <nmd-collapse animation="shrink">
        nested mole
    </nmd-collapse>
    <button type="button" onclick="this.previousElementSibling.toggle()">Whack-A-Nested-Mole</button>
</nmd-collapse>
<button type="button" onclick="this.previousElementSibling.expand()">Unwhack-A-Mole 4</button>

Just import dist/nmd-collapse.js into your document.