testing the new settings page

css/index.css

@@ -191,3 +191,35 @@ button:hover {
     font-weight: 500;
     font-style: normal;
 }
+.clicker {
+    display: inline-block;
+    width: 100px;
+    height: 50px;
+    background-color: blue;
+    color:#FFF;
+  }
+  .clicker.hidden {
+    display: none;
+  }
+  .hiddendiv {
+    height: 0px;
+    background-color: green;
+    overflow: hidden;
+    transition: height 0.5s;
+  }
+  .hiddendiv.nr2 {
+    background-color: red;
+  }
+  
+  #showdiv1:target ~ div a[href="#showdiv1"],
+  #showdiv2:target ~ div a[href="#showdiv2"] {
+    display: none;
+  }
+  #showdiv1:target ~ div a[href="#hidediv1"],
+  #showdiv2:target ~ div a[href="#hidediv2"] {
+    display: inline-block;
+  }
+  #showdiv1:target ~ div .hiddendiv.nr1,
+  #showdiv2:target ~ div .hiddendiv.nr2 {
+    height: 130px;
+  }

index.html

@@ -121,6 +121,20 @@
       <a href="settings.html" target="_blank">
         <button style="background-color: rgb(73, 73, 73);">Settings Page</button>
       </a>
+      <div id="showdiv1"></div>
+<div id="showdiv2"></div>
+
+<div>
+  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
+  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>
+
+  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
+  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>
+
+  <div class="hiddendiv nr1"></div>
+  <div class="hiddendiv nr2"></div>
+</div>
+
     </div>
     <div id="joinModal" class="modal" style="display: none;">
       <div class="modal-content">