expandable sections

public/app.css

@@ -5,3 +5,6 @@ td,th {
 th {
 	background:lightgrey;
 }
+h2 {
+	display:inline;
+}

src/components/show_category.vue

@@ -23,7 +23,8 @@
 </script>
 
 <template>
-	<h2>Show Category</h2>
+	<details>
+		<summary><h2>Show Category</h2></summary>
 		<select @change="change">
 			<option v-for="category in categories" v-bind:value="category.id">
 				{{category.instrument}}
@@ -57,6 +58,7 @@
 				</tr>
 			</tbody>
 		</table>
+	</details>
 </template>
 
 <style scoped>

src/components/summary.vue

@@ -16,7 +16,8 @@
 </script>
 
 <template>
-	<h2>Summary</h2>
+	<details>
+		<summary><h2>Summary</h2></summary>
 		<table>
 			<thead>
 				<tr>
@@ -37,6 +38,7 @@
 				</tr>
 			</tbody>
 		</table>
+	</details>
 </template>
 
 <style scoped>