diff --git a/frontend/app/src/App.vue b/frontend/app/src/App.vue
index 34eaeba..42fe887 100644
--- a/frontend/app/src/App.vue
+++ b/frontend/app/src/App.vue
@@ -9,6 +9,7 @@
 export default {
   name: 'App'
 }
+// https://codepen.io/anon/pen/BGzVpK
 </script>
 
 <style>
diff --git a/frontend/app/src/components/HelloWorld.vue b/frontend/app/src/components/HelloWorld.vue
index 47303c1..edb27d5 100644
--- a/frontend/app/src/components/HelloWorld.vue
+++ b/frontend/app/src/components/HelloWorld.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="hello2">
-    <sidenav-menu></sidenav-menu>
+    <transition-element></transition-element>
+    <!-- <sidenav-menu></sidenav-menu> -->
   </div>
 </template>
 
diff --git a/frontend/app/src/components/TransitionElement.vue b/frontend/app/src/components/TransitionElement.vue
new file mode 100644
index 0000000..e9cbc76
--- /dev/null
+++ b/frontend/app/src/components/TransitionElement.vue
@@ -0,0 +1,60 @@
+<template>
+    <div id="transition-element" class="demo" >
+  <p ref="myText" :style="[isActive ? { height : computedHeight } : {}]">
+    Now it's smooth - getting closer to BS4 collapse, but now I need to know the exact height of each section at a particular screen size to set the max-height. Over-compensating max-width work ok, but is still a bit 'jerky'. Is there a way to calculate an elements height before starting the show/hide? If the max-height value is too small, elements overlap.
+  </p>
+  <button @click="toggle">Open / Close</button>
+    </div>
+</template>
+
+
+<script>
+
+
+
+
+export default {
+
+    data() {
+        return{
+        isActive: false,
+        computedHeight: 0
+        }
+    },
+    methods: {
+      toggle: function(){
+          this.isActive = !this.isActive;
+      },
+      initHeight: function(){
+
+        this.$refs['myText'].style.height = 'auto';
+        this.$refs['myText'].style.position = 'absolute';
+        this.$refs['myText'].style.visibility = 'hidden';
+        this.$refs['myText'].style.display = 'block';
+
+        const height = getComputedStyle(this.$refs['myText']).height;      
+        this.computedHeight= height;  
+
+        this.$refs['myText'].style.position = null;
+        this.$refs['myText'].style.visibility = null;
+        this.$refs['myText'].style.display = null;
+        this.$refs['myText'].style.height = 0;
+
+      }
+    },
+    mounted: function(){
+      this.initHeight()
+    }
+};
+</script>
+
+
+<style scoped>
+
+p {
+    height: 0;
+    overflow: hidden;
+    transition: 1s;
+}
+
+</style>
diff --git a/frontend/app/src/main.js b/frontend/app/src/main.js
index dde9e10..c099f2c 100644
--- a/frontend/app/src/main.js
+++ b/frontend/app/src/main.js
@@ -5,9 +5,12 @@ import App from './App'
 import router from './router'
 import { store } from './store/store' //importowanie central store; 
 import SidenavMenu from '@/components/SidenavMenu'
+import TransitionElement from '@/components/TransitionElement'
 
 
 Vue.component('sidenav-menu', SidenavMenu) // globalnby import menu
+Vue.component('transition-element', TransitionElement) // globalnby import menu
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */