From c88eb6439662e191d3ef044a4ac59d3ff74cd485 Mon Sep 17 00:00:00 2001
From: maste9 <maste9@users.noreply.github.com>
Date: Fri, 18 Feb 2022 22:37:24 +0100
Subject: [PATCH] A button to toggle them all...

---
 index.html | 33 +++++++++++++++++++++++++++++++--
 style.css  | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 92290ac..64b10d8 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,10 @@
 
       <main id="comments">
 	<link rel="stylesheet" href="fontawesome/css/all.css">
-	<link rel="stylesheet" href="style.css?v=1.21">
+	<link rel="stylesheet" href="style.css?v=1.22">
+	<header>
+	  <h1>Comments from the Fediverse</h1>
+	  <button onclick="showHideAll()" class="hide" title="Show/Hide all statuses"></button></header>
 
 
       </main>
@@ -166,7 +169,33 @@
 	    else {
 		section.style.display = "none";
 		button.classList.add("hide");
-		buttom.classList.remove("show");
+		button.classList.remove("show");
+	    }
+	}
+
+	function showHideAll(){
+	    button = event.srcElement;
+	    commentArea = document.getElementById('comments');
+	    articles = commentArea.querySelectorAll('article section');
+
+	    if( button.classList.contains("hide") ) {
+		for( article of articles ) {
+		    article.style.display = "block";
+		    button.classList.add("show");
+		    button.classList.remove("hide");
+		    article.parentNode.querySelector("button").classList.add("show");
+		    article.parentNode.querySelector("button").classList.remove("hide");
+		}
+	    }
+	    else {
+		for( article of articles ) {
+		    article.style.display = "none";
+		    button.classList.add("hide");
+		    button.classList.remove("show");
+		    article.parentNode.querySelector("button").classList.add("hide");
+		    article.parentNode.querySelector("button").classList.remove("show");
+
+		}
 	    }
 	}
 
diff --git a/style.css b/style.css
index 40d4438..7afc4f6 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,31 @@ html {
     text-decoration: none;
 }
 
+#comments > header {
+    display:grid;
+    grid-template-areas:
+	"title button";
+    grid-template-columns: 4fr 1fr;
+    width:40em;
+    background: #282c37;
+    padding: 0.5em 0.25em 0.5em 0.25em;
+}
+
+#comments > header > h1 {
+    grid-area: title;
+    color: #b4b5ba;
+    text-shadow:2px 2px #424553;
+    font-size: 1em;
+    font-variant:oblique;
+    font-weight:thin;
+    padding-left:1em;
+}
+
+#comments > header > button {
+    grid-area:button;
+
+}
+
 time {
     display:inline-block;
     font-size: 0.7em;
@@ -59,7 +84,7 @@ article header time {
     padding-right:1em;
 }
 
-article header button {
+header button {
     grid-area: button;
     width: 2em;
     height: 1.5em;
@@ -70,20 +95,20 @@ article header button {
     color:#b4b5ba;    
 }
 
-article header button.show {
+header button.show {
     font-size: 2em;
 }
 
-article header button.show:before {
+header button.show:before {
     content: "\1F648";
 }
 
-article header button.hide {
+header button.hide {
     font-size: 2em;
 
 }
 
-article header button.hide:before {
+header button.hide:before {
     content: "\1F649";
 }