<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->

<template>

  <div id="app">

    <div ref="dropdown" class="dropdown">

      <strong class="dropdown-label" @click="show = !show">

        Click me to open!

      </strong>

      <p class="dropdown-content" v-if="show">

        Sea of Tranquility a mote of dust suspended in a sunbeam hundreds of

        thousands concept of the number one realm of the galaxies radio

        telescope. As a patch of light descended from astronomers two ghostly

        white figures in coveralls and helmets are softly dancing emerged into

        consciousness Orion's sword encyclopaedia galactica. Another world bits

        of moving fluff network of wormholes muse about network of wormholes

        with pretty stories for which there's little good evidence and billions

        upon billions upon billions upon billions upon billions upon billions

        upon billions.

      </p>

    </div>

  </div>

</template>

​

<script setup>

import autoAnimate from "https://unpkg.com/@formkit/auto-animate";

import { ref, onMounted } from "vue";

​

const dropdown = ref(); // we need a DOM node

const show = ref(false);

​

onMounted(() => {

  const el = dropdown.value;

  autoAnimate(el, {

    // Animation duration in milliseconds (default: 250)

    duration: 250,

    // Easing for motion (default: 'ease-in-out')

    easing: "ease-in-out",

    // When true, this will enable animations even if the user has indicated

    // they don’t want them via prefers-reduced-motion.

    disrespectUserMotionPreference: false

  });

});

</script>

​

<style lang="scss">

.dropdown {

  border: 2px solid #cbcbcb;

  border-radius: 0.5em;

  background-color: #fff;

  margin-bottom: 2em;

}

strong {

  display: block;

  padding: 1em;

  cursor: pointer;

}

p {

  margin: 1em;

  font-weight: 300;

  line-height: 1.5;

}

</style>

​