[+] Implement accordion with collapse

src/components/Collapse.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="collapse">
-        <h3 v-html="displayTitle" class="clickable" @click="show = !show"></h3>
-        <div class="content" :class="{hide: !show}">
+        <h3 v-html="displayTitle" class="clickable"></h3>
+        <div class="content">
             <slot></slot>
         </div>
     </div>
@@ -10,6 +10,7 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {Prop} from "vue-property-decorator";
+import $ from "jquery";
 
 @Options({components: {}})
 export default class Collapse extends Vue
@@ -22,40 +23,25 @@ export default class Collapse extends Vue
     {
         return decodeURIComponent(this.title)
     }
+
+    mounted(): void
+    {
+        $('.collapse').accordion({collapsible: true, header: 'h3', heightStyle: 'content',
+            active: false})
+    }
 }
 </script>
 
 <style lang="sass">
 .collapse
-    .hide
-        animation: fadeout 1s
-        -webkit-animation: fadeout 1s
-        opacity: 0
-        max-height: 0
-        pointer-events: none
+    h3.ui-accordion-header
+        margin: 0
+        padding-top: 0.5em
+        padding-bottom: 0.5em
 
-    /* Chrome, Safari, Opera */
-    @-webkit-keyframes fadeout
-        from
-            display: block
-            visibility: visible
-            opacity: 1
-        to
-            transform: translateY(-100px)
-            display: none
-            visibility: hidden
-            opacity: 0
-            height: 0
-
-    *
-        transition: all 0.25s ease
-
-    h3
-        background-clip: padding-box
-
-    h3:after
+    h3.ui-accordion-header:not(.ui-accordion-header-active):after
         content: '...'
 
     h3:hover
-        background-color: rgba(255, 131, 115, 0.36)
+        //background-color: rgba(255, 131, 115, 0.36)
 </style>