Gonna make a Collapsable field next

package-lock.json

@@ -1140,6 +1140,8 @@
     },
     "@vue/cli-plugin-babel": {
       "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-3.9.2.tgz",
+      "integrity": "sha512-XqfmGjUGnnJ3NA+HC31F6nkBvB9pFDhk4Lxeao8ZNJcEjKNEBYjlmHunJQdIe/jEXXum6U+U/ZE6DjDStHTIMw==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.0.0",
@@ -1151,6 +1153,8 @@
     },
     "@vue/cli-plugin-eslint": {
       "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-3.9.2.tgz",
+      "integrity": "sha512-AdvWJN+4Px2r3hbTDM2/rCtTcS6VyI7XuRljbfr2V9nF9cJiH4qsXFrTCRj3OgupbXJ14fUGKrLxmznLZIm1jA==",
       "dev": true,
       "requires": {
         "@vue/cli-shared-utils": "^3.9.0",
@@ -1769,6 +1773,8 @@
     },
     "@vue/cli-plugin-pwa": {
       "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-pwa/-/cli-plugin-pwa-3.9.0.tgz",
+      "integrity": "sha512-wOoSePJ7nbWiV8jRAt2i5IM3pWrf2TQZMcaf062wMLva/cLDOivENDGOWxL8kkCjfduQGXUkFYtqZCT1QKph8g==",
       "dev": true,
       "requires": {
         "@vue/cli-shared-utils": "^3.9.0",
@@ -1778,6 +1784,8 @@
     },
     "@vue/cli-service": {
       "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-3.9.3.tgz",
+      "integrity": "sha512-CZE9PP4HH9bK4qAaLbTUB3tubggI+aRSbgB/QYSZrVlhtMpuVFZPj2QHbIvJQZTI2cG6LFQtLTZWXKeqo5lbAQ==",
       "dev": true,
       "requires": {
         "@intervolga/optimize-cssnano-plugin": "^1.0.5",
@@ -1917,6 +1925,8 @@
     },
     "@vue/eslint-config-standard": {
       "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-standard/-/eslint-config-standard-4.0.0.tgz",
+      "integrity": "sha512-bQghq1cw1BuMRHNhr3tRpAJx1tpGy0QtajQX873kLtA9YVuOIoXR7nAWnTN09bBHnSUh2N288vMsqPi2fI4Hzg==",
       "dev": true,
       "requires": {
         "eslint-config-standard": "^12.0.0",
@@ -3513,6 +3523,8 @@
     },
     "connect": {
       "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
       "requires": {
         "debug": "2.6.9",
         "finalhandler": "1.1.2",
@@ -3698,6 +3710,11 @@
         }
       }
     },
+    "core-js": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4261,8 +4278,7 @@
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-      "dev": true
     },
     "des.js": {
       "version": "1.0.0",
@@ -4277,8 +4293,7 @@
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-      "dev": true
     },
     "detect-node": {
       "version": "2.0.4",
@@ -4598,6 +4613,8 @@
     },
     "eslint": {
       "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.16.0.tgz",
+      "integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -4799,6 +4816,8 @@
     },
     "eslint-plugin-vue": {
       "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
+      "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
       "dev": true,
       "requires": {
         "vue-eslint-parser": "^5.0.0"
@@ -4879,8 +4898,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-      "dev": true
     },
     "event-pubsub": {
       "version": "4.3.0",
@@ -5464,8 +5482,7 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-      "dev": true
     },
     "from2": {
       "version": "2.3.0",
@@ -6493,7 +6510,6 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
       "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "dev": true,
       "requires": {
         "depd": "~1.1.2",
         "inherits": "2.0.3",
@@ -6505,8 +6521,7 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-          "dev": true
         }
       }
     },
@@ -9335,8 +9350,7 @@
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-      "dev": true
     },
     "raw-body": {
       "version": "2.4.0",
@@ -9524,7 +9538,9 @@
       }
     },
     "register-service-worker": {
-      "version": "1.6.2"
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/register-service-worker/-/register-service-worker-1.6.2.tgz",
+      "integrity": "sha512-I8L87fX2TK29LDx+wgyOUh2BJ3rDIRC1FtRZEHeP3rivzDv6p1DDZLGGtPucqjEkm45+2crtFIFssEWv56+9Wg=="
     },
     "regjsgen": {
       "version": "0.5.0",
@@ -9837,6 +9853,8 @@
     },
     "sass": {
       "version": "1.22.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.7.tgz",
+      "integrity": "sha512-ahREi0AdG7RTovSv14+yd1prQSfIvFcrDpOsth5EQf1+RM7SvOxsSttzNQaFmK1aa/k/3vyYwlYF5l0Xl+6c+g==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -9961,6 +9979,8 @@
     },
     "sass-loader": {
       "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
+      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
       "dev": true,
       "requires": {
         "clone-deep": "^2.0.1",
@@ -10021,7 +10041,6 @@
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
       "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -10041,14 +10060,12 @@
         "mime": {
           "version": "1.6.0",
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-          "dev": true
         },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-          "dev": true
         }
       }
     },
@@ -10099,6 +10116,17 @@
         }
       }
     },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -10137,8 +10165,7 @@
     "setprototypeof": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
-      "dev": true
     },
     "sha.js": {
       "version": "2.4.11",
@@ -11115,8 +11142,7 @@
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
-      "dev": true
     },
     "topo": {
       "version": "2.0.2",
@@ -11528,7 +11554,9 @@
       "dev": true
     },
     "vue": {
-      "version": "2.6.10"
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
+      "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
     "vue-eslint-parser": {
       "version": "5.0.0",
@@ -11605,7 +11633,9 @@
       }
     },
     "vue-router": {
-      "version": "3.0.7"
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
+      "integrity": "sha512-utJ+QR3YlIC/6x6xq17UMXeAfxEvXA0VKD3PiSio7hBOZNusA1jXcbxZxVEfJunLp48oonjTepY8ORoIlRx/EQ=="
     },
     "vue-style-loader": {
       "version": "4.1.2",
@@ -11619,6 +11649,8 @@
     },
     "vue-template-compiler": {
       "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
+      "integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",

src/components/Collapsable.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="collapsable">
+        <input id="collapsible" class="toggle" type="checkbox">
+        <label for="collapsible" class="lbl-toggle" tabindex="0">More Info</label>
+        <div class="collapsible-content">
+            <div class="content-inner">
+            <p>
+                QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
+                its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
+                plug-ins. Test-Driven Development.
+            </p>
+            </div>
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+   
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.collapsable {
+    border: 2px dashed red;
+
+    .wrap-collabsible {
+        margin-bottom: 1.2rem 0;
+    }
+
+    input[type='checkbox'] {
+        display: none;
+    }
+
+    .lbl-toggle {
+        display: block;
+
+        font-weight: bold;
+        font-family: monospace;
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        text-align: center;
+
+        padding: 1rem;
+
+        color: #A77B0E;
+        background: #FAE042;
+
+        cursor: pointer;
+
+        border-radius: 7px;
+        transition: all 0.25s ease-out;
+    }
+
+    .lbl-toggle:hover {
+        color: #7C5A0B;
+    }
+
+    .lbl-toggle::before {
+        content: ' ';
+        display: inline-block;
+
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 5px solid currentColor;
+        vertical-align: middle;
+        margin-right: .7rem;
+        transform: translateY(-2px);
+
+        transition: transform .2s ease-out;
+    }
+
+    .toggle:checked + .lbl-toggle::before {
+        transform: rotate(90deg) translateX(-3px);
+    }
+
+    .collapsible-content {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .25s ease-in-out;
+    }
+
+    .toggle:checked + .lbl-toggle + .collapsible-content {
+        max-height: 350px;
+    }
+
+    .toggle:checked + .lbl-toggle {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .collapsible-content .content-inner {
+        background: rgba(250, 224, 66, .2);
+        border-bottom: 1px solid rgba(250, 224, 66, .45);
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
+        padding: .5rem 1rem;
+    }
+}
+</style>

src/views/Home.vue

@@ -12,6 +12,8 @@
       />
       <ItemGroup title="External Infrastructure"/>
       <ItemGroup title="Utilities"/>
+
+      <Collapsable />>
     </div>
   </div>
 </template>
@@ -19,12 +21,14 @@
 <script>
 
 import ItemGroup from '@/components/ItemGroup.vue'
+import Collapsable from '@/components/Collapsable.vue';
 import * as linkData from './../data/item-data.json'
 
 export default {
   name: 'home',
   components: {
-    ItemGroup
+    ItemGroup,
+    Collapsable,
   },
   data: () => {
     return {