diff --git a/core/client.js b/core/client.js
index dd7cc2a4..52d66d8a 100644
--- a/core/client.js
+++ b/core/client.js
@@ -207,6 +207,62 @@ class TfFilesElement extends LitElement {
 }
 customElements.define('tf-files', TfFilesElement);
 
+class TfFilesPaneElement extends LitElement {
+	static get properties() {
+		return {
+			expanded: {type: Boolean},
+			current: {type: String},
+			files: {type: Object},
+		};
+	}
+
+	constructor() {
+		super();
+		this.expanded = window.localStorage.getItem('files') == '1';
+		this.files = {};
+	}
+
+	set_expanded(expanded) {
+		this.expanded = expanded;
+		window.localStorage.setItem('files', expanded ? '1' : '0');
+	}
+
+	render() {
+		let self = this;
+		let expander = this.expanded ?
+			html`<span @click=${() => self.set_expanded(false)} class="expander">«</span>` :
+			html`<span @click=${() => self.set_expanded(true)} class="expander">»</span>`;
+		let content = html`
+			<div id="files_content">
+				<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
+				<br>
+				<div><button @click=${() => newFile()}>New File</button></div>
+				<div><button @click=${() => removeFile()}>Remove File</button></div>
+			</div>
+		`;
+		return html`
+			<style>
+				.expander {
+					font-weight: bold;
+					width: 100%;
+					right: 0;
+					flex: 0;
+					padding: 0.25em;
+					cursor: pointer;
+				}
+			</style>
+			<div>
+				<div style="display: flex; flex-direction: row">
+					${this.expanded ? html`<span style="font-weight: bold; text-align: center; flex: 1">Files</span>` : undefined}
+					${expander}
+				</div>
+				${this.expanded ? content : undefined}
+			</div>
+		`;
+	}
+}
+customElements.define('tf-files-pane', TfFilesPaneElement);
+
 class TfSparkLineElement extends LitElement {
 	static get properties() {
 		return {
@@ -362,16 +418,6 @@ function edit() {
 	});
 }
 
-function hideFiles() {
-	window.localStorage.setItem('files', '0');
-	document.getElementById('filesPane').classList.add('collapsed');
-}
-
-function showFiles() {
-	window.localStorage.setItem('files', '1');
-	document.getElementById('filesPane').classList.remove('collapsed');
-}
-
 function trace() {
 	window.open(`/speedscope/#profileURL=${encodeURIComponent('/trace')}`);
 }
@@ -1058,11 +1104,13 @@ function openFile(name) {
 }
 
 function updateFiles() {
-	let files = document.getElementById("files_list");
-	files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, {
-		clean: gFiles[file].doc.isClean(gFiles[file].generation),
-	}]));
-	files.current = gCurrentFile;
+	let files = document.getElementsByTagName("tf-files-pane")[0];
+	if (files) {
+		files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, {
+			clean: gFiles[file].doc.isClean(gFiles[file].generation),
+		}]));
+		files.current = gCurrentFile;
+	}
 
 	gEditor.focus();
 }
@@ -1096,8 +1144,6 @@ window.addEventListener("load", function() {
 	window.addEventListener("message", message, false);
 	window.addEventListener("online", connectSocket);
 	document.getElementById("name").value = window.location.pathname;
-	document.getElementById('files_hide').addEventListener('click', () => hideFiles());
-	document.getElementById('files_show').addEventListener('click', () => showFiles());
 	document.getElementById('closeStats').addEventListener('click', () => closeStats());
 	document.getElementById('closeEditor').addEventListener('click', () => closeEditor());
 	document.getElementById('save').addEventListener('click', () => save());
@@ -1111,8 +1157,6 @@ window.addEventListener("load", function() {
 		event.preventDefault();
 		toggleStats();
 	});
-	document.getElementById('new_file_button').addEventListener('click', () => newFile());
-	document.getElementById('remove_file_button').addEventListener('click', () => removeFile());
 	for (let tag of document.getElementsByTagName('a')) {
 		if (tag.accessKey) {
 			tag.classList.add('tooltip_parent');
@@ -1145,15 +1189,9 @@ window.addEventListener("load", function() {
 	} else {
 		closeEditor();
 	}
-	if (window.localStorage.getItem('files') == '1') {
-		showFiles();
-	} else {
-		hideFiles();
-	}
 	if (window.localStorage.getItem('stats') == '1') {
 		stats();
 	} else {
 		closeStats();
 	}
-	document.getElementById('files_list').addEventListener('file_click', event => openFile(event.detail.file));
 });
diff --git a/core/index.html b/core/index.html
index bdbd69b1..9b9d1c77 100644
--- a/core/index.html
+++ b/core/index.html
@@ -26,19 +26,7 @@
 					<input type="button" id="stats_button" value="Stats">
 				</div>
 				<div class="hbox" style="height: 100%">
-					<div id="filesPane">
-						<div class="hbox">
-							<span id="files_header">Files</span>
-							<span id="files_hide">«</span>
-							<span id="files_show">»</span>
-						</div>
-						<div id="files_content">
-							<tf-files id="files_list"></tf-files>
-							<br>
-							<div><button id="new_file_button">New File</button></div>
-							<div><button id="remove_file_button">Remove File</button></div>
-						</div>
-					</div>
+					<tf-files-pane></tf-files-pane>
 					<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
 						<div style="flex: 1 1 50%; position: relative">
 							<textarea id="editor" class="main"></textarea>
diff --git a/core/style.css b/core/style.css
index 23099de9..c3ec0278 100644
--- a/core/style.css
+++ b/core/style.css
@@ -157,51 +157,6 @@ a:active {
 .cyan { color: #2aa198; }
 .green { color: #859900; }
 
-#files_header {
-	font-weight: bold;
-	text-align: center;
-	flex: 1;
-}
-
-#files_hide {
-	font-weight: bold;
-	width: 100%;
-	right: 0;
-	flex: 0;
-	padding: 0.25em;
-	cursor: pointer;
-}
-
-#files_show {
-	display: none;
-	padding: 0.25em;
-	cursor: pointer;
-}
-
-#filesPane {
-	flex: 1 1 10%;
-}
-
-#filesPane.collapsed {
-	flex: 0;
-}
-
-.collapsed #files_header {
-	display: none;
-}
-
-.collapsed #files_content {
-	display: none;
-}
-
-.collapsed #files_hide {
-	display: none;
-}
-
-.collapsed #files_show {
-	display: block;
-}
-
 .tooltip {
 	position: absolute;
 	z-index: 1;