Improved new style.

css/style.css

@@ -58,6 +58,20 @@ section {
 
 }
 
+
+section:last-of-type {
+
+	opacity: 0.5;
+
+}
+
+section:last-of-type:hover {
+
+	opacity: 1;
+
+}
+
+
 section > h2 {
 
 	font-size: 200%;
@@ -90,6 +104,13 @@ button {
 
 }
 
+button.small {
+
+	width: auto;
+	line-height: 1.2em;
+
+}
+
 .description {
 
 	margin: 10px;
@@ -128,3 +149,47 @@ input[type="text"] {
 	padding-left: 4px;
 
 }
+
+form {
+
+	display: none;
+
+}
+
+h5 {
+
+	display: none;
+
+}
+
+.showmore-box {
+
+	display: none;
+
+}
+
+.showmore, .showless {
+
+	color: #888888;
+
+}
+
+.showmore-box:checked ~ .showmore {
+
+	display: none;
+
+}
+
+.showmore-box:not(:checked) ~ .showless {
+
+	display: none;
+
+}
+
+
+
+.showmore-box:checked ~ form, .showmore-box:checked ~ h5 {
+
+	display: block;
+
+}

index.php

@@ -182,11 +182,12 @@ $formats = Format::searchInformation();
 				$inactiveBridges .= HTMLUtils::displayBridgeCard($bridgeName, $formats, false) . PHP_EOL;
 			}
 		}
-		echo '<hr />' . $inactiveBridges;
+		echo $inactiveBridges;
 	?>
-    <footer>
+    <section>
-		<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges (<a href="?show_inactive=1">Show inactive</a>)<br />
+        <a href="https://github.com/sebsauvage/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
-        <a href="https://github.com/sebsauvage/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a>
+		<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
-    </footer>
+		<a href="?show_inactive=1"><button class="small">Show inactive bridges</button></a><br />
+    </section>
     </body>
 </html>

lib/HTMLUtils.php

@@ -35,6 +35,8 @@ class HTMLUtils {
 			<p class="description">
 				{$description}
 			</p>
+			<input type="checkbox" class="showmore-box" id="showmore-{$bridgeName}" />
+			<label class="showmore" for="showmore-{$bridgeName}">Show more</label>
 CARD;
 
 		// If we don't have any parameter for the bridge, we print a generic form to load it.
@@ -141,6 +143,7 @@ CARD;
 
 		}
 
+		$card .= '<label class="showless" for="showmore-' . $bridgeName . '">Show less</label>';
 		$card .= '<p class="maintainer">'.$bridgeElement->maintainer.'</p>';
 		$card .= '</section>';