Hide expired events by default; add link to show/hide them

1 files changed, 17 insertions, 0 deletions

diff --git a/list.php b/list.php
index ef7f903..52b07b8 100644
--- a/list.php
+++ b/list.php
@@ -55,6 +55,7 @@ if (isset ($_GET['keywords']) && count ($_GET['keywords']) != count ($keywords))
 <input type="submit" value="Update filters"/>
 </form>
 <p>Export this calendar in <a href="<?=$ical_url?>">iCal</a> format.</p>
+<p><a href="#" onclick="return toggle_expired_events(event);">Show/hide</a> past events.</p>
 <table>
 <tr>
 	<th>Date(s)</th>
@@ -149,8 +150,24 @@ function expand_or_collapse (elem,id)
 	xhttp.send();
 }
 
+var expired_events_are_shown=true;
+function toggle_expired_events (event)
+{
+	expired_events_are_shown=!expired_events_are_shown;
+
+	const rows=document.getElementsByClassName ('expired');
+	for (var i=0; i<rows.length; i++)
+		rows[i].style.display=expired_events_are_shown ? 'table-row' : 'none';
+
+	if (event)
+		event.preventDefault();
+	return false;
+}
+
 update_keywords_field();
 checkboxes.map (cb => cb.onchange=update_keywords_field);
+
+toggle_expired_events();
 </script>
 </body>
 </html>