diff -r a5bfd99bc2a3 -r 60045b362d71 templates/trip.html
--- a/templates/trip.html	Sat Jun 24 19:38:05 2017 +0300
+++ b/templates/trip.html	Wed Jun 28 12:20:05 2017 +0300
@@ -4,35 +4,44 @@
 	<link rel="stylesheet" type="text/css" href="/static/style.css" />
 	<meta charset='UTF-8' />
 	<style>
-	.sarake-pysäkki, .sarake-pysäkkiviite, .sarake-alue
+	.sarake-alue
 	{
 		text-align: left;
 	}
-	td, th, body
+	.sarake-aika
+	{
+		width: 0;
+	}
+	td.folded table
+	{
+		display: none;
+	}
+	td.unfolded a.region-name
 	{
-		font-size: 24pt;
-	}/*
-	body
+		font-weight: bold;
+	}
+	.nested-schedule td
 	{
-		background: url('/static/tausta-bussi.png') no-repeat center center fixed;
-		background-size: cover;
-	}*/
+		margin-left: 0;
+		margin-right: 0;
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+	.nested-schedule
+	{
+		border-radius: 10px;
+		margin-top: 10px;
+	}
 	</style>
 	<script>
-	function openTab(event, category)
+	function toggle_fold(id)
 	{
-		var tabcontent = document.getElementsByClassName("tab");
-		for (var i = 0; i < tabcontent.length; i++)
-			tabcontent[i].style.display = "none";
-
-		var tablinks = document.getElementsByClassName("tab-button");
-		for (var i = 0; i < tablinks.length; i++)
-			tablinks[i].className = tablinks[i].className.replace(" active", "");
-
-		document.getElementById(category).style.display = "block";
-		event.currentTarget.className += " active";
-		window.scrollTo(0, 0);
-	} 
+		element = document.getElementById(id);
+		if (element.className.indexOf(" folded") !== -1)
+			element.className = element.className.replace(" folded", "") + " unfolded";
+		else
+			element.className = element.className.replace(" unfolded", "") + " folded";
+	}
 	</script>
 	<title>{{route}} {{description}}</title>
 </head>
@@ -42,48 +51,29 @@
 	&#127769;
 	{% endif %}
 	{{route}} {{description}}</h1>
-	<nav>
-	<div class="tab-bar">
-	<span></span>
-	<button class="tab-button active" onclick="openTab(event, 'tab-overview')">Reitti</button>
-	<button class="tab-button" onclick="openTab(event, 'tab-stops')">Pysäkit</button>
-	<span></span>
-	</div>
-	</nav>
 	<p style="text-align: center">Ajomatka: {{'%.1f' % length}}km</p>
-	<div id="tab-overview" class="tab">
-		<table class='aikataulu' cellspacing='0'>
-			<tr>
-				<th class='sarake-aika'>Aika</th>
-				<th class='sarake-alue'>Alue</th>
-			</tr>
-			{% for entry in concise_schedule %}
-			<tr>
-				<td class='sarake-aika'>{{entry['time']}}</td>
-				<td class='sarake-alue'>{{entry['region']}}</td>
-			</tr>
-			{% endfor %}
-		</table>
-	</div>
-	<div id="tab-stops" class="tab" style="display: none">
-		<table class='aikataulu' cellspacing='0'>
-			<tr>
-				<th class='sarake-aika'>Aika</th>
-				<th class='sarake-pysäkkiviite'>Pysäkki</th>
-				<th class='sarake-pysäkki'>Nimi</th>
-			</tr>
-			{% for halt in schedule %}
-			<tr>
-				<td class='sarake-aika'>{{halt['time']}}</td>
-				<td class='sarake-pysäkkiviite'>
-					<a href="/pysäkki/{{halt['id']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['code']}}</a>
-				</td>
-				<td class='sarake-pysäkki'>
-					<a href="/pysäkki/{{halt['id']}}">{{halt['name']}}</a>
-				</td>
-			</tr>
-			{% endfor %}
-		</table>
-	</div>
+	<table class='aikataulu' cellspacing='0'>
+		<tr>
+			<th class='sarake-aika'>Aika</th>
+			<th class='sarake-alue'>Alue</th>
+		</tr>
+		{% for entry in schedule %}
+		<tr>
+			<td class='sarake-aika' style='vertical-align: top'>{{entry['time']}}</td>
+			<td class='sarake-alue folded' id="region-schedule-{{entry['index']}}">
+				<a class="region-name" href="javascript:toggle_fold('region-schedule-{{entry['index']}}')">{{entry['name']}}</a>
+				<table class="nested-schedule" cellspacing="0">
+				{% for halt in entry['stops'] %}
+				<tr>
+					<td>{{halt['time']}}</td>
+					<td><a href="/pysäkki/{{halt['id']}}"><img src='/static/pysäkki.png' height='24' />&nbsp;{{halt['code']}}</a></td>
+					<td><a href="/pysäkki/{{halt['id']}}">{{halt['name']}}</a></td>
+				</tr>
+				{% endfor %}
+				</table>
+			</td>
+		</tr>
+		{% endfor %}
+	</table>
 </body>
 </html>