From 2dba4d515673dce43d091aa4d13efcb820fc7e4d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 10 Nov 2015 10:32:08 +0100
Subject: [PATCH] Use display:none for CollapsibleButton's hidden panel

Using visibility:invisible is awkward due to the spacing it leaves when
the panel is invisible. The CollapsibleParagraph behaves similarly,
leaving no spacing behind when the paragraph is collapsed.
---
 js/components/ascribe_collapsible/collapsible_button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_collapsible/collapsible_button.js b/js/components/ascribe_collapsible/collapsible_button.js
index 6fb39c71..caf89df3 100644
--- a/js/components/ascribe_collapsible/collapsible_button.js
+++ b/js/components/ascribe_collapsible/collapsible_button.js
@@ -21,13 +21,13 @@ let CollapsibleButton = React.createClass({
         this.setState({expanded: !this.state.expanded});
     },
     render() {
-        let isVisible = (this.state.expanded) ? '' : 'invisible';
+        let isHidden = (this.state.expanded) ? '' : 'hidden';
         return (
             <span>
                 <span onClick={this.handleToggle}>
                     {this.props.button}
                 </span>
-                <div ref='panel' className={isVisible}>
+                <div ref='panel' className={isHidden}>
                     {this.props.panel}
                 </div>
             </span>