diff --git a/embark-ui/src/components/FileExplorer.js b/embark-ui/src/components/FileExplorer.js
index 269610f89..27b513cd5 100644
--- a/embark-ui/src/components/FileExplorer.js
+++ b/embark-ui/src/components/FileExplorer.js
@@ -9,12 +9,12 @@ const Header = ({style, node}) => {
   const iconStyle = {marginRight: '5px'};
 
   return (
-      <div style={style.base}>
-          <div style={style.title}>
-              <i className={iconClass} style={iconStyle}/>
-              {node.name}
-          </div>
+    <div style={style.base}>
+      <div style={style.title}>
+        <i className={iconClass} style={iconStyle} />
+        {node.name}
       </div>
+    </div>
   );
 };
 
@@ -26,40 +26,81 @@ Header.propTypes = {
 decorators.Header = Header;
 
 class FileExplorer extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
-      files: this.props.files
+      showHidden: false
     };
   }
 
-  onToggle(node, toggled){
-    let oldNode = this.state.cursor;
-    if(oldNode) {
-      oldNode.active = false;
-    }
+  onToggle(node, toggled) {
     node.active = true;
-    if(node.children) {
+    if (node.children) {
       node.toggled = toggled;
     } else {
       this.props.fetchFile(node);
     }
-    this.setState({ cursor: node });
+    this.setState({cursor: node});
   }
 
-  onHiddenToggle(value){
-    this.setState({files: this.props.files.filter((file) => {
-        return;
-      })
+  onHiddenToggle(e) {
+    this.setState({showHidden: e.target.checked});
+  }
+
+  nodeEquals(a, b) {
+    return a && b && a.path && b.path && a.name && b.name &&
+      a.path === b.path &&
+      a.name === b.name;
+  }
+
+  isNodeInPath(a, b) {
+    return a && b && a.path && b.path &&
+      a.path !== b.path &&
+      b.path.indexOf(a.path) > -1;
+  }
+
+  filterHidden(nodes) {
+    let filtered = [];
+    if (!Array.isArray(nodes)) return filtered;
+
+    // we need a foreach to build an array instead of a
+    // filter to prevent mutating the original object (in props) 
+    nodes.forEach(node => {
+      const {showHidden, cursor} = this.state;
+      if (!showHidden && node.isHidden) return;
+      let updatedNode = {...node};
+
+      // if it's a folder, filter the children
+      if (node.children) {
+        let children = this.filterHidden(node.children);
+        if (children.length) {
+          updatedNode.children = children;
+        }
+      }
+      
+      // if this is the selected node, set it as active
+      if (this.nodeEquals(node, cursor)) {
+        updatedNode.active = cursor.active;
+        // if this node has children, set it as toggled
+        if (node.children) updatedNode.toggled = cursor.toggled;
+      }
+      // if this is a directory, and it lies in the path
+      // of the selected node, ensure it's toggled
+      if (node.children && this.isNodeInPath(node, cursor)) {
+        updatedNode.toggled = true;
+      }
+      filtered.push(updatedNode);
     });
+
+    return filtered;
   }
 
-  render(){
+  render() {
     return (
       <React.Fragment>
-        <Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" ref={(input) => { this.showHidden = input; }} onToggle={this.onHiddenToggle.bind(this)} />
+        <Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" onChange={this.onHiddenToggle.bind(this)} />
         <Treebeard
-          data={this.props.files}
+          data={this.filterHidden(this.props.files)}
           decorators={decorators}
           onToggle={this.onToggle.bind(this)}
         />