Collapse Logic and styling in place

client/scss/asset-display/_asset-display.scss

@@ -61,15 +61,14 @@
 
 .asset-information-wrap {
   max-width: 800px;
-
   p.asset-description {
     white-space: pre-line;
     font-size: 14px;
     color: #2E2F31;
     letter-spacing: 0;
     line-height: 18px;
+    width: 360px;
   }
-
   .asset-information {
     width: 320px;
   }

client/scss/vertical-split/_vertical-split.scss

@@ -5,3 +5,20 @@
   justify-content: space-between;
   align-items    : center;
 };
+
+.collapse-content.hidden{
+  display: none;
+}
+
+.collapse-button {
+  outline: none;
+  background: none;
+  border: none;
+  display: block;
+  margin: 15px auto 0;
+  width: 24px;
+  height: 24px;
+  svg {
+    stroke: $brand-color;
+  }
+}

client/src/components/VerticalCollapsibleSplit/index.jsx

@@ -1,18 +1,33 @@
 import React from 'react';
-
+import * as Icon from 'react-feather';
 class VerticalCollapsibleSplit extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.collapse = this.collapse.bind(this);
+    this.state = { open: true };
+  }
+
+  collapse () {
+    this.setState({ open: !this.state.open });
+    document.getElementById(this.props.name).classList.toggle('hidden');
+  }
+
   render () {
     return (
       <div className={'vertical-split'}>
         <div className='visible-content'>
           {this.props.top}
+          <button className='collapse-button' onClick={this.collapse}>
+            {this.state.open ? <Icon.PlusSquare /> : <Icon.MinusSquare /> }
+          </button>
         </div>
-        <div className='collapse-content'>
+        <div className='collapse-content' id={this.props.name}>
           {this.props.bottom}
         </div>
       </div>
     );
   }
-}
+};
 
 export default VerticalCollapsibleSplit;

client/src/pages/ShowAssetDetails/view.jsx

@@ -19,6 +19,7 @@ class ShowAssetDetails extends React.Component {
           asset={asset}
         >
           <VerticalCollapsibleSplit
+            name={'asset-display-collapse'}
             top={<AssetDisplay />}
             bottom={<AssetInfo />}
           />